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

css 隱藏省略號

錢多多1年前7瀏覽0評論

CSS隱藏省略號是一個常用的技巧,特別是在處理長文本或者長標題的情況下。下面將介紹兩種方法。

1. 使用text-overflow屬性

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

以上代碼中,第一行的overflow屬性是必需的,可以將超出部分隱藏。第二行的white-space屬性可以強制在一行內顯示文字,消除換行,從而避免在切斷文本前強制換行的情況。第三行的text-overflow屬性是實現省略號的關鍵。其中的ellipsis表示省略號。如果不加該屬性,則文本將被截斷,繼續顯示文字的部分將被隱藏。

2. 使用max-width和強制換行

display: inline-block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-wrap: break-word;

以上代碼中,第一行的display屬性將元素設置為行內塊元素,可以使用max-width來控制寬度。第二行的max-width屬性限制該元素的寬度不超過其父元素的寬度。接下來幾行的屬性與第一種方法相同。不同的是,加入了word-wrap: break-word屬性,可以強制在單詞內換行,這種情況下超出部分不需要使用text-overflow:ellipsis。

總的來說,兩種方法都可以實現隱藏省略號的效果,但是第一種方法在不換行的情況下比較適用,特別是在長標題的情況下,第二種方法則更適用于顯示長段落的情況下。