HTML5提供了去掉文字點(diǎn)的方便的代碼,將在本文介紹此代碼的使用。
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
這段代碼的作用是,當(dāng)一個元素的文本內(nèi)容超過了其容器的寬度,就會自動截斷并在末尾添加省略號,從而防止文本溢出。
其中,text-overflow: ellipsis;
是設(shè)置省略號,white-space: nowrap;
是讓文本不折行,overflow: hidden;
是讓溢出的文本隱藏,從而實(shí)現(xiàn)截斷。
例如,我們可以在一個div容器中添加一段文本,并將其寬度設(shè)置為200px,使文本超出容器寬度。代碼如下:
<div style="width: 200px; overflow: hidden;">
<p style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">
這是一段超出容器寬度的文本內(nèi)容,我們可以使用text-overflow屬性來在末尾添加省略號...
</p>
</div>
這樣就會在文本末尾添加省略號,從而不影響布局。
總之,HTML5的這段代碼能夠很好地處理文本溢出問題,讓網(wǎng)頁內(nèi)容更加美觀和規(guī)整。