文本溢出处理是前端开发者必备的一个技能,很多时候,你无法预料到文本到底有多长,用手动的方式删除文本肯定是不现实,就需要自动的让多出的文字变省略号,所以掌握text-overflow很有必要。
![e539376005142a213b89bb97594ed7f9.png](https://i-blog.csdnimg.cn/blog_migrate/9612d6cb3374a5e534dc6101d0de6656.jpeg)
很常见的超长标题被截断了
语法
text-overflow:ellipsis;
ellipsis:当对象内文本溢出时显示省略标记(…)
单独使用text-overflow属性是无法得到想要的效果。因为text-overflow属性只是说明文字溢出时用什么方式显示,要实现溢出时产生省略号效果,还比须多定义2个标签
white-space:nowrap;(强制文本在一行内显示)
overflow:hidden;(溢出内容为隐藏)
还有一个隐形的条件,宽度width要设定,否者也无法实现效果。
这是一个处理文本溢出的css公式。只要上面的条件达成了,就可以实现文本溢出的部分用省略号表示。
案例
要实现也并不难,就是个公式,把3个属性带上,在设定一个宽度,就再也不怕文字溢出。
![a5c0183da477bf227f746658484f2462.png](https://i-blog.csdnimg.cn/blog_migrate/e2c540c247d48d19edbddcf8c6501281.jpeg)
文字溢出公式
以下就是文字溢出
![d929323c365fdb82bd668d8af14d6f4a.png](https://i-blog.csdnimg.cn/blog_migrate/4436e447e469a53074ad110b6cae97ef.jpeg)
文字溢出
![aa23e07911b4af19c8d6b9ebc92a62cc.gif](https://i-blog.csdnimg.cn/blog_migrate/478d0453b8971f98d31a9a12f1800acd.gif)
超出的部分,变省略号
总结
![679ad4fc108d79a73068da224ae5c49c.png](https://i-blog.csdnimg.cn/blog_migrate/2f9009a7658683891c400690d67f2be4.jpeg)
总结