多行文字溢位時出現省略號

飛機發表於2018-06-12

多行文字溢位時出現省略號

本文推薦2種方法。

1. css

tip：只相容chrome核心的瀏覽器。ff不支援。

.box {
    overflow: hidden; /* 溢位時不顯示溢位的內容 */
    text-overflow: ellipsis; /* 發生溢位時使用省略號代替 */
    display: -webkit-box; /* chrome瀏覽器的私有屬性。顯示為box。 */
    -webkit-box-orient: vertical; /* 垂直排列元素 */
    -webkit-line-clamp: 2; /* 顯示多少行 */
}

延展

word-wrap

關鍵字 描述 預設值 值
word-wrap 規定單詞換行的條件 normal, 在單詞斷字點處換行。 break-word，在單詞內換行。
overflow-wrap,在css3時由word-wrap改為overflow-wrap

text-overflow

關鍵字 描述 預設值 值
test-overflow 超出盒子的文字如何顯示 clip, 修剪文字。 ellipsis, 顯示省略號。 string, 顯示指定的文字。

white-space

關鍵字 描述 預設值 值
white-space 對待空白的方法和是否換行 normal，空白會被瀏覽器忽略。 pre, 保留空白。nowrap, 文字不換行。pre-wrap, 保留空白，正常換行。pre-line，合併空白，保留換行。

box-orient

這個屬性還沒有被瀏覽器支援。需要使用各自瀏覽器的私有屬性。

關鍵字 描述 預設值 值
box-orient 子元素如何排序 inline-axis，子元素沿著內聯座標軸（對映到橫向）。 horizontal, 指定子元素在一個水平線上從左到右排列。vertical, 從頂部向底部垂直排列子元素。block-axis, 子元素沿著塊座標軸（對映到垂直）。inherit，繼承父元素。

line-clamp

只有chrome核心的瀏覽器支援自己的私有屬性。

顯示多少行塊級元素。

2. js

使用js控制溢位文字如何顯示的方法有很多。這裡推薦一個指令碼檔案：ellipsis.js

ellipsis.js

名稱 連結
ellipsis 連結 https://www.jsdelivr.com/pack…
ellipsis https://cdn.jsdelivr.net/npm/…
ellipsis git https://github.com/glinford/e…

使用方法。

1、 引入指令碼檔案

<script src="https://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.js"></script>

2、 使用

var ell = Ellipsis({
    lines: 3
})
var ele = document.getElementsByClassName(`test`)
ell.add(ele)

延展

它還有一些配置項。若不配置則使用預設值。

{
    ellipsis: `...`, // 預設顯示的替代文字
    debounce: 0, // 延遲多長時間後執行
    responsive: true, // 是否有視窗大小改變時執行
    className: `.clamp`, // 預設操作具有這個類的元素。
    lines: 2, // 預設只出現2行元素。
    portrait: null, // 預設不改變，如果你想要在豎屏模式下有不同的行數，
    break_word: true // 預設截斷單詞。
}

2018/06/12 by stone

相關文章