CSS3 文字截斷是一種常用的 CSS 技巧,可以限制文本顯示的行數,同時也可以添加省略號等樣式效果來增強頁面的美觀性和可讀性。
要實現文字截斷,我們可以使用text-overflow
屬性。該屬性有以下取值:
text-overflow: clip; /* 剪切文本 */ text-overflow: ellipsis; /* 添加省略號 */ text-overflow:string; /* 自定義省略字符 */
其中,clip 表示直接截斷文本,不顯示省略號;ellipsis 表示添加省略號,常用于單行文本截斷;而 string 可以自定義省略字符。
此外,我們還需要設置overflow: hidden;
,將超出容器的文本隱藏;white-space: nowrap;
,禁止文本換行;以及指定容器寬度和行高等樣式。
.container { width: 200px; line-height: 1.5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
最后,需要注意的是,text-overflow
只能用于塊級元素,如<p>
、<div>
等。而對于表格、表單元素等非塊級元素,我們需要使用其他方式實現文字截斷,如 JS 或添加額外的 HTML 結構。
上一篇php assert函數
下一篇php assert木馬