CSS文字填滿是一個非常有用的效果,當我們想要讓一段文本在容器內自適應寬度時,就可以使用這種效果來實現。
具體實現方式如下:
代碼示例: .container { width: 200px; } .text { display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
這段代碼中,我們首先先將容器的寬度定為200px,然后在文本的樣式中設定寬度為100%,這樣就可以使文本自適應容器的寬度。
同時,我們設置了overflow為hidden,這樣就可以在文本溢出時進行隱藏。接著,我們使用text-overflow屬性對文本進行省略處理,同時使用white-space屬性對文本的空白符進行處理,保證文本不會進行換行操作。
最終的效果就是文字會鋪滿整個容器,而且文本溢出時也不會破壞布局。這種效果在需要顯示限定長度的文本時非常實用,比如門店地址、電話等。