CSS中的多余文字省略是指當元素中的內容過長超出了容器的寬度時,將多余的文字省略并用省略號(“...”)表示,從而不破壞整個布局。
實現多余文字省略的方法是通過CSS的text-overflow屬性,該屬性有以下三個值:
.text { overflow: hidden; /*隱藏超出容器范圍的內容*/ text-overflow: ellipsis; /*將多余的內容省略并用省略號表示*/ white-space: nowrap; /*防止文字換行*/ }
其中,text-overflow: ellipsis 只有在 overflow: hidden 的情況下才會生效。
需要注意的是,只有以下幾種元素才支持text-overflow屬性:
- 塊元素(display: block)
- 行內塊元素(display: inline-block)
- 表格單元格(display: table-cell)
如果想要實現多余文字省略的效果且元素不屬于上述幾種元素,可以考慮將元素的display屬性設置為以上三種元素之一。
多余文字省略在實際開發中經常被用到,可以讓頁面內容更加整潔、美觀。
上一篇css中在底部對齊
下一篇itop 2.3 php