是前端经常遇到的需求。对于一些比较长的文本，不显示，或者显示省略号。今天整理了一下，做了个备忘录。1.显示超出固定长度....class{width:400px;空白：nowrap；//设置文本不换行overflow:hidden;//这里设置为隐藏。还有一些，比如scroll，超过固定长度，在底部显示滚动条。文本溢出：省略号；//这里是设置是直接隐藏文字，还是显示....目前显示的是一个省略号。直接省略的是剪辑显示：inline-block；//根据不同标签的显示值，有的不需要添加。}2。超出显示的固定行数...超出固定行数。显示省略号，类似于上面。上面解释了overflow和text-overflow。.class{溢出：隐藏；文本溢出：省略号；-webkit-line-clamp:2;//这里是设置超出几行隐藏-webkit-box-orient:vertical;显示：-webkit-box；//根据标签显示不同，有些不需要添加。或者设置成其他属性，你可以自己试试}巨坑提醒（多行隐藏）有时候，你按照上面的设置。它只是行不通。或者在本地生效，在服务端打包react（或vue）时不会生效。您可以在控制台中看到它。-webkit-box-orient属性消失了吗？如果是这种情况，请参阅下面的解决方案。//方法一，只写-webkit-box-orient:vertical;在样式中//Method2.class{overflow:hidden;文本溢出：省略号；-webkit-line-clamp:2;/*autoprefixer:off*///是的，加上这两条注释即可。-webkit-box-orient：垂直；/*autoprefixer:on*/display:-webkit-box;}不生效的原因。不知道，网上也有很多说法。这个英文题目好像对原因做了一些研究。如果你有兴趣，可以去看看。(https://github.com/postcss/au…)
