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; }
以上這些方式都可以實現文字超出顯示的效果,開發者可根據實際需求選擇適合的方式進行使用。