亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

多行文本溢出時(shí)出現(xiàn)省略號(hào)

王偉廷 / 1975人閱讀

摘要：多行文本溢出時(shí)出現(xiàn)省略號(hào)本文推薦種方法。溢出時(shí)不顯示溢出的內(nèi)容發(fā)生溢出時(shí)使用省略號(hào)代替瀏覽器的私有屬性。顯示指定的文本。顯示多少行塊級(jí)元素。默認(rèn)顯示的替代文本延遲多長(zhǎng)時(shí)間后執(zhí)行是否有窗口大小改變時(shí)執(zhí)行默認(rèn)操作具有這個(gè)類(lèi)的元素。

多行文本溢出時(shí)出現(xiàn)省略號(hào)

本文推薦2種方法。

1. css

tip：只兼容chrome內(nèi)核的瀏覽器。ff不支持。

.box {
    overflow: hidden; /* 溢出時(shí)不顯示溢出的內(nèi)容 */
    text-overflow: ellipsis; /* 發(fā)生溢出時(shí)使用省略號(hào)代替 */
    display: -webkit-box; /* chrome瀏覽器的私有屬性。顯示為box。 */
    -webkit-box-orient: vertical; /* 垂直排列元素 */
    -webkit-line-clamp: 2; /* 顯示多少行 */
}
延展

word-wrap

關(guān)鍵字 描述 默認(rèn)值 值
word-wrap 規(guī)定單詞換行的條件 normal, 在單詞斷字點(diǎn)處換行。 break-word，在單詞內(nèi)換行。
overflow-wrap,在css3時(shí)由word-wrap改為overflow-wrap

text-overflow

關(guān)鍵字 描述 默認(rèn)值 值
test-overflow 超出盒子的文本如何顯示 clip, 修剪文本。 ellipsis, 顯示省略號(hào)。 string, 顯示指定的文本。

white-space

關(guān)鍵字 描述 默認(rèn)值 值
white-space 對(duì)待空白的方法和是否換行 normal，空白會(huì)被瀏覽器忽略。 pre, 保留空白。nowrap, 文本不換行。pre-wrap, 保留空白，正常換行。pre-line，合并空白，保留換行。

box-orient

這個(gè)屬性還沒(méi)有被瀏覽器支持。需要使用各自瀏覽器的私有屬性。

關(guān)鍵字 描述 默認(rèn)值 值
box-orient 子元素如何排序 inline-axis，子元素沿著內(nèi)聯(lián)坐標(biāo)軸（映射到橫向）。 horizontal, 指定子元素在一個(gè)水平線(xiàn)上從左到右排列。vertical, 從頂部向底部垂直排列子元素。block-axis, 子元素沿著塊坐標(biāo)軸（映射到垂直）。inherit，繼承父元素。

line-clamp

只有chrome內(nèi)核的瀏覽器支持自己的私有屬性。

顯示多少行塊級(jí)元素。

2. js

使用js控制溢出文本如何顯示的方法有很多。這里推薦一個(gè)腳本文件：ellipsis.js

ellipsis.js
名稱(chēng) 鏈接
ellipsis 鏈接 https://www.jsdelivr.com/pack...
ellipsis https://cdn.jsdelivr.net/npm/...
ellipsis git https://github.com/glinford/e...
使用方法。

1、 引入腳本文件

2、 使用

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

它還有一些配置項(xiàng)。若不配置則使用默認(rèn)值。

{
    ellipsis: "...", // 默認(rèn)顯示的替代文本
    debounce: 0, // 延遲多長(zhǎng)時(shí)間后執(zhí)行
    responsive: true, // 是否有窗口大小改變時(shí)執(zhí)行
    className: ".clamp", // 默認(rèn)操作具有這個(gè)類(lèi)的元素。
    lines: 2, // 默認(rèn)只出現(xiàn)2行元素。
    portrait: null, // 默認(rèn)不改變，如果你想要在豎屏模式下有不同的行數(shù)，
    break_word: true // 默認(rèn)截?cái)鄦卧~。
}

2018/06/12 by stone

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/113500.html

相關(guān)文章

  • 【前端芝士樹(shù)】純CSS實(shí)現(xiàn)多行文本溢出顯示省略號(hào)

    摘要：前端芝士樹(shù)純實(shí)現(xiàn)多行文本溢出顯示省略號(hào)使用來(lái)控制行數(shù)由于用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù)這是一個(gè)不規(guī)范的屬性，它沒(méi)有出現(xiàn)在規(guī)范草案中，為了實(shí)現(xiàn)該效果，它需要組合其他外來(lái)的屬性。 【前端芝士樹(shù)】純CSS實(shí)現(xiàn)多行文本溢出顯示省略號(hào) 使用-webkit-line-clamp來(lái)控制行數(shù) 由于-webkit-line-clamp 用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù),這是一個(gè)不規(guī)范的屬性（u...

    CNZPH 評(píng)論0 收藏0

  • CSS實(shí)現(xiàn)單行、多行文本溢出顯示省略號(hào)

    摘要：如果實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)同學(xué)們應(yīng)該都知道用屬性來(lái)，當(dāng)然還需要加寬度屬來(lái)兼容部分瀏覽。接下來(lái)重點(diǎn)說(shuō)一說(shuō)多行文本溢出顯示省略號(hào)，如下。如果實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)同學(xué)們應(yīng)該都知道用text-overflow:ellipsis屬性來(lái)，當(dāng)然還需要加寬度width屬來(lái)兼容部分瀏覽。 實(shí)現(xiàn)方法： overflow: hidden; text-overflow:ellipsis; whit...

    番茄西紅柿 評(píng)論0 收藏0

  • 移動(dòng)端的text-overflow多行文本溢出顯示省略號(hào)(…)

    摘要：大家應(yīng)該都知道用屬性來(lái)實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)。但是這個(gè)屬性并不支持多行文本溢出顯示省略號(hào)，這里根據(jù)應(yīng)用場(chǎng)景介紹幾個(gè)方法來(lái)實(shí)現(xiàn)這樣的效果。，可以用來(lái)多行文本的情況下，用省略號(hào)隱藏超出范圍的文本。 大家應(yīng)該都知道用text-overflow:ellipsis屬性來(lái)實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)(…)。當(dāng)然部分瀏覽器還需要加寬度width屬性。 overflow: hidden; te...

    thekingisalwaysluc 評(píng)論0 收藏0

  • 移動(dòng)端的text-overflow多行文本溢出顯示省略號(hào)(…)

    摘要：大家應(yīng)該都知道用屬性來(lái)實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)。但是這個(gè)屬性并不支持多行文本溢出顯示省略號(hào)，這里根據(jù)應(yīng)用場(chǎng)景介紹幾個(gè)方法來(lái)實(shí)現(xiàn)這樣的效果。，可以用來(lái)多行文本的情況下，用省略號(hào)隱藏超出范圍的文本。 大家應(yīng)該都知道用text-overflow:ellipsis屬性來(lái)實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)(…)。當(dāng)然部分瀏覽器還需要加寬度width屬性。 overflow: hidden; te...

    JerryWangSAP 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<