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

css3 文字 超出顯示

吉茹定2年前10瀏覽0評論

CSS3可以實現文字超出顯示的效果,主要有以下幾種方式:

1. ellipsis 末尾省略號

/* 單行文字 */
.ellipsis {
white-space: nowrap; /* 不換行 */
overflow: hidden; /* 超出隱藏 */
text-overflow: ellipsis; /* 文字以省略號結尾 */
}
/* 多行文字 */
.multi-ellipsis {
display: -webkit-box; /* 將元素變成彈性伸縮盒子 */
-webkit-box-orient: vertical; /* 垂直排列 */
overflow: hidden; /* 超出隱藏 */
text-overflow: ellipsis; /* 文字以省略號結尾 */
-webkit-line-clamp: 3; /* 限制行數 */
}

2. word-break 換行

/* 強制換行 */
.break-all {
word-break: break-all;
}
/* 非英文字符斷行 */
.break-word {
word-break: break-word;
}

3. text-indent 縮進

/* 首行縮進 */
.text-indent {
text-indent: 2em;
}
/* 首行取消縮進 */
.text-no-indent {
text-indent: 0;
}

4. text-shadow 陰影

/* 文字陰影 */
.text-shadow {
text-shadow: 2px 2px 2px #666;
}

5. letter-spacing 字符間距

/* 字符間距 */
.letter-space {
letter-spacing: 2px;
}

以上這些方式都可以實現文字超出顯示的效果,開發者可根據實際需求選擇適合的方式進行使用。