CSS設定溢位文字顯示省略號
阿新 • • 發佈：2018-11-06
CSS設定溢位文字顯示省略號
相關CSS
.text-ellipse{
width: 100px;
height:50px;
border:2px solid red;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
<div class="text-ellipse">
fdsfasgsdafsadf
</div>
效果如圖：
下面對上文中的幾個css屬性進行一下講解
overflow:hidden
這個沒啥好說的，就是設定文字操作內容區域的部分不顯示。
white-space:nowrap
| 值 | 描述 |
|---|---|
| normal | 預設。空白會被瀏覽器忽略。 |
| pre | 空白會被瀏覽器保留。其行為方式類似 HTML 中的<pre> 標籤。 |
| nowrap | 文字不會換行，文字會在在同一行上繼續，直到遇到 <br> 標籤為止。 |
| pre-wrap | 保留空白符序列，但是正常地進行換行。 |
| pre-line | 合併空白符序列，但是保留換行符。 |
| inherit | 規定應該從父元素繼承 white-space 屬性的值。 |
text-overflow:ellipsis
| 值 | 描述 |
|---|---|
| clip | 修剪文字 |
| ellipsis | 顯示省略符號來代表被修剪的文字 |