CSS中的文本溢出加省略號(ellipsis)是在限定塊級元素的尺寸后出現的,當塊級元素中的文本過多時,為了避免影響頁面的布局,出現的一個處理方式。這種方式能夠保證元素視覺上的美觀又不失重要信息的展示。
下面是實現方法:
.ellipsis { width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
其中要點幾個:
- 我們需要限制元素的寬度,通過width屬性。這可以讓元素在一行中呈現,而不是自動換行。
- overflow:hidden; 把元素溢出的部分隱藏起來,讓它裁剪在元素的邊緣之內。
- white-space: nowrap; 防止在不需要時換行,讓文本一直在一行中顯示。
- text-overflow: ellipsis; 讓超出元素寬度部分的文本顯示省略號。其中ellipsis是CSS3新增的屬性,代表省略號。如果想用三個點以外的其他符號,也可以自定義。
需要注意的是,該方式僅適用于單行文本溢出,如果需要處理多行文本溢出,仍然需要考慮其他方案。
上一篇css文本框的提示語
下一篇css文本框設置顯示幾行