欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css控制換行用省略號

阮建安2年前11瀏覽0評論

CSS是一種非常有用的技能,可以幫助我們控制頁面的樣式。一個常見的需求就是在一些地方,當內容太長的時候,我們希望用省略號來代替超出部分。下面是一些CSS控制換行用省略號的技巧。

/* 單行省略 */
.single-line-ellipsis {
white-space: nowrap; /* 不換行 */
overflow: hidden; /* 隱藏超出部分 */
text-overflow: ellipsis; /* 顯示為省略號 */
}
/* 多行省略 -webkit-line-clamp只在Chrome、Safari和iOS Safari中支持*/
.multi-line-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 顯示幾行 */
overflow: hidden;
text-overflow: ellipsis;
}
/* 兼容其他瀏覽器的多行省略 */
.multi-line-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* 兼容行數不夠的情況 */
word-break: break-all;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

以上代碼中,“single-line-ellipsis”表示單行省略,“multi-line-ellipsis”表示多行省略,具體使用時可以根據需要選擇相應的類名。在使用多行省略時,-webkit-line-clamp只在一些特定的瀏覽器中支持,為了保證兼容性,可以添加其他的語句,如word-break、-webkit-hyphens和-moz-hyphens等。

總之,掌握了CSS控制換行用省略號的技巧,我們就可以更好地控制頁面的樣式,讓頁面更加美觀和優雅。