react多行文字超出省略号失败解决办法

在react less文件中直接使用以下css属性失效

// 单行文字加省略号overflow: 'hidden',textOverflow: 'ellipsis',whiteSpace: 'nowrap'// 两行文字加定高overflow: 'hidden',textOverflow: 'ellipsis',display: '-webkit-box',-webkit-line-clamp: 2,-webkit-box-orient: 'vertical'

解决办法

使用style加入行内样式

• 注意div不要给定高
• 去掉单行省略号时要添加的white-space: 'nowrap’属性
• 行内样式要大写，-webkit-line-clamp写成WebkitLineClamp

// 单行样式
<pclassName={styles.courseText}style={{overflow: 'hidden',textOverflow: 'ellipsis',whiteSpace: 'nowrap'}}
>{文字}p>// 多行样式
<pclassName={styles.courseText}style={{overflow: 'hidden',textOverflow: 'ellipsis',display: '-webkit-box',WebkitLineClamp: 2,WebkitBoxOrient: 'vertical'}}
>{文字}p>

然后就大功告成啦！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！