文本溢出顯示省略號，鼠標浮動查看全部內容

目錄

1、文本溢出顯示省略號

2、鼠標浮動查看全部內容

---

1、文本溢出顯示省略號

今天做項目時遇到一種需求：文本溢出截斷省略，上網查閱了一下，還是挺簡單的，但是考慮到自己疑似老年癡呆的大腦，就在這裏整理一下，以備以後碰到這種同樣的需求。如果是單行溢出顯示省略可以使用如下代碼：

div {  
  white-space:nowrap;  /* 設置文字在一行顯示，不能換行 */  
  overflow: hidden;    /* 文字長度超出限定寬度，則隱藏超出的內容 */
  text-overflow: ellipsis;/* 規定當文本溢出時，顯示省略符號來代表被修剪的文本 */
}

上述的三行代碼所有瀏覽器基本上都支持，而且可以做到響應式截斷，文本溢出範圍才顯示省略號，否則不顯示省略號。

但有時候還需要考慮顯示的行數，如：超出兩行或三行才考慮內容溢出省略，就可以使用如下代碼：

div {      
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;     /* 將對象作爲彈性伸縮盒子模型顯示 */      
  -webkit-line-clamp: 2;    /* 控制最多顯示幾行 */      
  -webkit-box-orient: vertical; /* 設置或檢索伸縮盒對象的子元素的排列方式 */    
}

2、鼠標浮動查看全部內容

有隱藏就要有顯示，不然誰知道省略的那部分文本具體內容是什麼，我們可以通過 title 屬性顯示所有文本內容：

<!--如果title的內容是字面量，直接寫就好了-->
<p class="ellipse" title="這裏填寫字符串內容">{{this.message}}</p>

<!--如果title的內容是變量，則需要通過v-bind綁定-->
<p class="ellipse" :title="通過v-bind:title綁定">{{this.message}}</p>