CSS 中的溢出省略號是一種很方便的用于截斷長文本并添加省略號的功能。但是,在某些情況下,它可能會失效,導致文本沒有被截斷而顯示出來。
.text{ white-space: nowrap; /* 禁止換行 */ overflow: hidden; /* 溢出隱藏 */ text-overflow: ellipsis; /* 顯示省略號 */ }
這是一個常見的 CSS 代碼段,它將這個類中的文本截斷并添加省略號。但是,某些情況下,這些屬性可能會失效。
例如,在以下情況下,省略號不會工作:
- 當元素的
display
屬性設置為table-cell
或inline-block
時,省略號不會工作。 - 當一個單詞太長而無法放入容器時,它也不會被截斷。
- 在某些瀏覽器中,當文本包含某些字符(例如中文)時,省略號可能無法正常工作。
因此,我們需要在實現 CSS 截斷和省略號之前仔細考慮上述情況,并針對特定情況進行一些特殊處理。例如,在塊級元素中,可以使用display: -webkit-box;
和-webkit-box-orient: vertical;
來截斷文本。
.text{ display: -webkit-line-clamp: 2; /* 控制行數 */ -webkit-box-orient: vertical; /* 設置文本橫向排列 */ overflow: hidden; /* 溢出隱藏 */ text-overflow: ellipsis; /* 顯示省略號 */ }
如果要在表格單元格或浮動元素中添加省略號,則可以考慮使用 JavaScript 實現截斷和省略號。
下一篇css滾動圖片教程