色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3 文字截斷

阮建安1年前8瀏覽0評論

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 結構。