css實現文字溢位顯示省略號
在做響應式網頁的時候，我們要想在不同尺寸的裝置下保證布局不會錯亂，就需要對文字的長度進行限定。
基礎設定
在介紹下面的方法之前，我們先對所有的例子進行基礎的樣式設定
/*基礎設定*/
div.box{
width: 100px;
height: 100px;
border: 1px solid #ddd;
color: #333;
line-height: 1.8;
margin:30px auto;
設定好啦，現在我們開始表演=.=
1.單行溢位隱藏顯示...
目錄結構清晰是首要目標，至於命名只要能達到表意的目的即可。目錄結構清晰
/*1.單行溢位隱藏顯示...(在文字的容器上設定)*/
.text-box1 p{
white-space: nowrap; /*超出的空白區域不換行*/
overflow: hidden; /*超出隱藏*/
text-overflow: ellipsis; /*文字超出顯示省略號*/
我一定要把每一步都記得清清楚楚，因為我發現不寫清楚為什麼這樣設定，過段時間真的會忘了。
執行效果：
2.多行溢位隱藏顯示...
目錄結構清晰是首要目標，至於命名只要能達到表意的目的即可。目錄結構清晰
/*2.多行溢位隱藏顯示...(在文字的容器上設定) 只相容webkit核心的瀏覽器*/
.text-box2 p{
display: -webkit-box; /*將物件轉為彈性盒模型展示*/
-webkit-box-orient: vertical; /*設定彈性盒模型子元素的排列方式*/
-webkit-line-clamp: 2; /*限制文字行數*/
overflow: hidden; /*超出隱藏*/
執行效果：
3.多行溢位隱藏顯示...
目錄結構清晰是首要目標，至於命名只要能達到表意的目的即可。目錄結構
/*3.多行溢位隱藏顯示...(跨瀏覽器相容+偽元素定位)*/
.text-box3 p{
position: relative;
line-height: 1.4em; /*行高和height成倍數，這裡以三行文字超出隱藏舉例*/
height: 4.2em;
overflow: hidden;
.text-box3 p::after{ /*若要相容ie8需用:after*/
content: "..."; /*替換內容比較靈活*/
position: absolute;
bottom: 2px;
right:5px;
padding: 0 3px;
background:#fff; /*顏色和文字背景保持一致*/
box-shadow: 0 0 10px #fff; /*邊緣處理*/
這種方式比較靈活，但是實現的效果可能會比較生硬，所以需要對邊緣進行虛化處理。
執行效果：
意思是這個意思，或許會有更合適的方法進行處理
css實現文字溢位隱藏省略
1.單行文字溢位省略 overflow hidden 超出限定寬度則隱藏超出的內容 white space nowrap 設定文字在一行內顯示，不能換行 text overflow ellipsis 規定當文字溢位時，顯示省略號來代表被修剪的文字2.多行文字溢位省略 overflow hidden ...
css實現單行（多行）文字溢位顯示
overflow hidden text overflow ellipsis white space nowrap 當然還需要加寬度width屬來相容部分瀏覽。以上為單行文字溢位 以下為多行文字溢位 display webkit box webkit box orient vertical webk...
CSS實現單行 多行文字溢位顯示 的總結
效果圖如下 實現方法 overflow hidden text overflow ellipsis white space nowrap 還需要加寬度width屬來相容部分瀏覽。效果圖如下 實現方法 display webkit box webkit box orient vertical webk...