一、單行超出顯示省略號(hào)
如果文字超出父元素指定寬度，文字會(huì)自動(dòng)換行，而連續(xù)不間斷數(shù)字和英文字母（沒(méi)有其他字符）不會(huì)自動(dòng)換行；
詳細(xì)步驟：
- 第一步(不換行)：white-space:nowrop;（對(duì)于連續(xù)的數(shù)字或者英文字母可省略）
- 第二步（溢出隱藏）overflow:hidden;
- 第三步（文本溢出顯示省略號(hào)）text-overflow：ellipsis;(省略號(hào)）
white-space: nowrap; //不換行
overflow: hidden; //超出部分隱藏
text-overflow: ellipsis; //文本溢出顯示省略號(hào)二、多行超出顯示 省略號(hào)
對(duì)于內(nèi)核是webkit的瀏覽器（Google/Safari）,可以直接用CSS樣式；
溢出隱藏：overflow: hidden;
省略號(hào)：text-overflow: ellipsis; display: -webkit-box;
彈性盒模型：
設(shè)置彈性盒子的子元素的排列方式 ：-webkit-box-orient: vertical;
設(shè)置顯示文本的行數(shù)：-webkit-line-clamp: 5; (最多顯示5行)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-597457.html
overflow: hidden;//溢出隱藏
text-overflow: ellipsis;//省略號(hào)
display: -webkit-box;//
-webkit-box-orient: vertical;//設(shè)置彈性盒子的子元素的排列方式
-webkit-line-clamp: 5;//設(shè)置顯示文本的行數(shù)
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-597457.html
到了這里，關(guān)于CSS實(shí)現(xiàn)單行或者多行文本溢出隱藏并且顯示省略號(hào)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
