css3 屬性 text-overflow 實現截取多餘文字內容 以省略號來代替多餘內容

css3 屬性 text-overflow: ellipsis

• 前言
• 正文
• 結束語

前言

咱們在設計網站的時候有時會遇到這樣一個需求：由於頁面空間大小的問題，須要將多餘的文字隱藏起來，並以省略號代替，相似這樣的效果：

作到這樣的效果，咱們須要運用兩個特殊的樣式來實現 text-overflow 和 white-space

正文

讓咱們分別來看一下使用了這些樣式，和不使用這些樣式的區別吧

• html內容

<div class="box">
    <span>我是一段測試文本1我是一段測試文本2我是一段測試文本3我是一段測試文本4我是一段測試文本5我是一段測試文本5</span>
</div>

1. 不使用特殊樣式

• 樣式內容

.box{
    background: red;
    width: 100px;
}

• 效果展現
  
  咱們能夠看到，文本根據邊框的寬度，自動換行，而且所有顯示

2. 使用 white-space: nowrap 樣式

• 樣式內容

.box{
    background: red;
    width: 100px;
    white-space: nowrap;             /*使文本內容不換行，寫在一行*/
}

• 效果圖
  
  3. 使用white-space: nowrap和overflow:hidden樣式
• 樣式內容

.box{
    background: red;
    width: 100px;
    white-space: nowrap;             /*使文本內容不換行，寫在一行*/
    overflow: hidden;                /*隱藏多餘內容*/
}

• 效果圖
  
  4. 使用white-space: nowrap和overflow:hidden和text-overflow: ellipsis 樣式
• 樣式內容

.box{
    background: red;
    width: 100px;
    white-space: nowrap;             /*使文本內容不換行，寫在一行*/
    overflow: hidden;                /*隱藏多餘內容*/
    text-overflow: ellipsis;         /*將多餘內容以省略號的方式展現*/
}

• 效果圖
  

結束語

但願這篇文章對你們能有所幫助