如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)
生活随笔
收集整理的這篇文章主要介紹了
如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
如何使text-overflow:elipsis起作用？
想要使用css屬性text-overflow:elipsis起到作用，樣式必須跟overflow:hidden; white-space:nowrap;width:150px;一起使用
1、text-overflow語法：
text-overflow : clip | ellipsis
2、text-overflow參數(shù)說明：
clip: 不顯示省略標(biāo)記（...），而是簡單的裁切
elipsis: 當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記（...）
3、簡單使用：
<!doctype html> <html><head><meta charset="utf-8"><title>測試頁面</title></head><style type="text/css"> .test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;}</style><body><ul id="textFlow"><li class="test"><a href="#">第一標(biāo)題：奇藝之旅</a></li><li class="test"><a href="#" title="第二標(biāo)題：薩迪斯的項圈的奇聞異事">第二標(biāo)題：薩迪斯的項圈的奇聞異事</a></li><li class="test"><a href="#" title="第三標(biāo)題：杜斯的奇妙之旅。測試數(shù)據(jù)。測試數(shù)據(jù)">第三標(biāo)題：杜斯的奇妙之旅。測試數(shù)據(jù)。測試數(shù)據(jù) </a></li></ul></body> </html>4、演示效果：
轉(zhuǎn)載于:https://www.cnblogs.com/xielong/p/7341037.html
總結(jié)
以上是生活随笔為你收集整理的如何解决Css属性text-overflow:ellipsis 不起作用(文本溢出显示省略号)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java字节序与大小端转换_什么时候要进
- 下一篇： python 收银系统_实现全栈收银系统