>文本超出為省略號在很多位置都會用到，作為一個基本樣式或者說原子類樣式，我們需要知道其實現原理為什么。 ## 使用場景 文字內容過多，超出盒子模型的內容顯示為省略號。提示：無論是單行還是多行文本，都需要設置高度，行高，超出不可見。（僅供參考） ## 文本單行省略 ``` bash .demo{ white-space:nowrap;（超出不換行，默認為換行的） text-overflow:ellipsis;（省略號樣式） //代碼部分 完整部分 overflow: hidden; white-space:nowrap; text-overflow:ellipsis; } ``` ## 文本多行省略 (-webkit-) ``` bash white-space:normal;（超出寬度換行） text-overflow: ellipsis; （省略號樣式） -webkit-box-orient: vertical; -webkit-line-clamp: 3;（行數） display: -webkit-box;（展示盒子模型類型） //代碼部分(供拷貝) overflow:hidden; white-space:normal; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; display: -webkit-box; ``` ## 其他方案 * 引入jq插件，待補充