在設計網頁時,我們經常會遇到一個問題:文本內容過長,如何處理?一種常見的方法是使用省略號(...)來表示文本的縮略。這個時候,CSS 中的 text-overflow 屬性就派上了用場。
text-overflow 屬性被用來指定當文本溢出其容器時,應該如何處理。常用的值有以下三種:
/* 顯示省略號 */ text-overflow: ellipsis; /* 顯示一個自定義字符 */ text-overflow: ">>"; /* 不顯示省略號 */ text-overflow: clip;
其中,最常用的是 ellipsis。我們來看一個例子:
.container { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } <div class="container"> 一段很長很長的文本內容...... </div>
上面的代碼通過設置容器的寬度、禁止文字換行、隱藏溢出部分并顯示省略號,實現了文本內容過長時的縮略顯示。
需要注意的是,text-overflow 屬性只有在文本容器的 overflow 屬性取值為 hidden 或 auto 時才會生效。另外,text-overflow 屬性只針對單行文本有效,如果要處理多行文本溢出的情況,可以考慮使用 jQuery 插件等解決方案。
以上就是關于 CSS 文字過長省略號的介紹。希望對大家有所幫助。
下一篇css 文字過長顯示