css 溢出隐藏_超长的文字在网页怎么处理？不用删文字，溢出处理

文本溢出处理是前端开发者必备的一个技能，很多时候，你无法预料到文本到底有多长，用手动的方式删除文本肯定是不现实，就需要自动的让多出的文字变省略号，所以掌握text-overflow很有必要。

很常见的超长标题被截断了

语法

text-overflow:ellipsis;

ellipsis：当对象内文本溢出时显示省略标记(…)

单独使用text-overflow属性是无法得到想要的效果。因为text-overflow属性只是说明文字溢出时用什么方式显示，要实现溢出时产生省略号效果，还比须多定义2个标签

white-space:nowrap;(强制文本在一行内显示)

overflow:hidden;(溢出内容为隐藏)

还有一个隐形的条件，宽度width要设定，否者也无法实现效果。

这是一个处理文本溢出的css公式。只要上面的条件达成了，就可以实现文本溢出的部分用省略号表示。

案例

要实现也并不难，就是个公式，把3个属性带上，在设定一个宽度，就再也不怕文字溢出。

文字溢出公式

以下就是文字溢出

文字溢出

超出的部分，变省略号

总结

总结