css實現文字溢位顯示省略號

在做響應式網頁的時候，我們要想在不同尺寸的裝置下保證佈局不會錯亂，就需要對文字的長度進行限定。

基礎設定

在介紹下面的方法之前，我們先對所有的例子進行基礎的樣式設定

/*基礎設定*/
div.box{
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    color: #333;
    line-height: 1.8;
    margin:30px auto;
}

設定好啦，現在我們開始表演=.=

1.單行溢位隱藏顯示…

<!--單行溢位隱藏顯示...
 
-->
<div class="box text-box1">
    <p>目錄結構清晰是首要目標，至於命名只要能達到表意的目的即可。目錄結構清晰</p>
</div>

/*1.單行溢位隱藏顯示...(在文字的容器上設定)*/
.text-box1 p{
    white-space: nowrap;      /*超出的空白區域不換行*/
    overflow: hidden;         /*超出隱藏*/
    text-overflow: ellipsis;  /*文字超出顯示省略號*/
}

我一定要把每一步都記得清清楚楚，因為我發現不寫清楚為什麼這樣設定，過段時間真的會忘了。
執行效果：

2.多行溢位隱藏顯示…

<!--多行溢位隱藏顯示...（只相容webkit核心的瀏覽器）-->
<div class="box text-box2">
    <p>目錄結構清晰是首要目標，至於命名只要能達到表意的目的即可。目錄結構清晰</p>
</div>

/*2.多行溢位隱藏顯示...(在文字的容器上設定)  只相容webkit核心的瀏覽器*/
.text-box2 p{
    display: -webkit-box;             /*將物件轉為彈性盒模型展示*/
    -webkit-box-orient: vertical;     /*設定彈性盒模型子元素的排列方式*/
    -webkit-line-clamp: 2
 
;            /*限制文字行數*/
    overflow: hidden;                 /*超出隱藏*/
}

執行效果：

3.多行溢位隱藏顯示…

<!--多行溢位隱藏顯示...(跨瀏覽器相容+偽元素定位)-->
<div class="box text-box3">
    <p>目錄結構清晰是首要目標，至於命名只要能達到表意的目的即可。目錄結構</p>            
</div>

/*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;  /*邊緣處理*/
}

這種方式比較靈活，但是實現的效果可能會比較生硬，所以需要對邊緣進行虛化處理。
執行效果：

意思是這個意思，或許會有更合適的方法進行處理