react使用less时，多行文本换行超出省略号不生效

Posted 2023-04-20

参考技术A 在普通的前端项目中，如果不考虑兼容问题，一般使用如下方法

但是在react项目中却发现不生效，是因为在编译后没有-webkit-box-orient: vertical;

解决方法就是：

1、使用行内样式

2、在less文件中-webkit-box-orient: vertical;上面加一行过滤

文字单行超出时隐藏不换行并且省略号提示/字母文字缩进间隔属性

1. 固定width内，文字显示不全，使用white_space:nowrap强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象
2. word-break:break-all 例如div宽400px，它的内容就会到400px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
3. word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

4. word-spacing：字间距对英文单词生效，中文和英文字母不生效

   letter-spacing：字间距对英文字母和中文生效

   text-indent：缩进像素，规定文本块中首行文本的缩进。

   line-height：决定上下行间隔

   .content {
     font-size: 16px;
     text-indent: 32px;
     line-height: 25px;
     letter-spacing: 1.5px;
   }

.content{

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis

}