在CSS中,我們可以使用text-overflow
屬性來設(shè)置當(dāng)文本超出其容器時如何顯示。text-overflow
屬性可以設(shè)置為clip
或ellipsis
。
當(dāng)設(shè)置為clip
時,文本超出容器部分會被裁剪,即不顯示超出部分。
當(dāng)設(shè)置為ellipsis
時,文本超出容器部分會以省略號(...)的形式顯示。
為了使text-overflow
屬性正常工作,還需要設(shè)置容器的white-space
屬性為nowrap
,以防止文本自動換行,還需要設(shè)置容器的寬度或***大寬度,以防止文本無限擴(kuò)展。
下面是一個示例代碼:
.container { width: 100px; /* 設(shè)置容器寬度 */ white-space: nowrap; /* 防止文本自動換行 */ text-overflow: clip; /* 裁剪超出容器部分的文本 */ }
在這個示例中,如果文本超出了100px的容器寬度,那么超出部分將不會被顯示。