成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

多行文本超出后隱藏,超出3行隱藏

番茄西紅柿 / 3610人閱讀

摘要：使用插件可實(shí)現(xiàn)多行文本超出后隱藏的功能地址下載后項(xiàng)目引入多行行上代碼無(wú)標(biāo)題文檔對(duì)象遵循常規(guī)流。對(duì)象脫離常規(guī)流，使用，，，等屬性以窗口為參考點(diǎn)進(jìn)行定位，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。

1. 使用插件 clamp.js 可實(shí)現(xiàn)多行文本超出后隱藏的功能  2. git地址 https://github.com/josephschmitt/Clamp.js 下載后項(xiàng)目引入clamp.js 3.  //多行 3行 　　let demo = document.getElementById(demo) 　　$clamp(demo, {clamp: 3}) 上代碼： 
DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔title>
    
    <script src="https://cengjingdeshuige.oss-cn-beijing.aliyuncs.com/js/clamp.js">script>
head>

<body>
<p id="demo">
 static：對(duì)象遵循常規(guī)流。top，right，bottom，left等屬性不會(huì)被應(yīng)用。 relative： 對(duì)象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過(guò)top，right，bottom，left屬性進(jìn)行偏移時(shí)不影響常規(guī)流中的任何元素。 absolute：對(duì)象脫離常規(guī)流，使用top，right，bottom，left等屬性進(jìn)行絕對(duì)定位，盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊。fixed：對(duì)象脫離常規(guī)流，使用top，right，bottom，left等屬性以窗口為參考點(diǎn)進(jìn)行定位，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。center：對(duì)象脫離常規(guī)流，使用top，right，bottom，left等屬性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊。（CSS3）page：盒子的位置計(jì)算參照absolute。盒子在分頁(yè)媒體或者區(qū)域塊內(nèi)，盒子的包含塊始終是初始包含塊，否則取決于每個(gè)absolute模式。（CSS3） sticky： 對(duì)象在常態(tài)時(shí)遵循常規(guī)流。它就像是 relative 和 fixed 的合體，當(dāng)在屏幕中時(shí)按常規(guī)流排版，當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實(shí)中你見(jiàn)到的吸附效果。（CSS3）* CSS3新增屬性可能存在描述錯(cuò)誤及變更，僅供參考，持續(xù)更新
p>
<script>
    let demo = document.getElementById(demo)
    $clamp(demo, {clamp: 3})
script>
body>
html>

 

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

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

相關(guān)文章

  • css文本超出隱藏顯示省略號(hào)

    摘要：如果實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)同學(xué)們應(yīng)該都知道用屬性來(lái)，當(dāng)然還需要加寬度屬來(lái)兼容部分瀏覽。接下來(lái)重點(diǎn)說(shuō)一說(shuō)多行文本溢出顯示省略號(hào)，如下。給添加漸變背景可避免文字只顯示一半。p?style=width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;> ? ? 如果實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)同學(xué)們應(yīng)該都...

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

  • css實(shí)現(xiàn)文本溢出隱藏

    摘要：實(shí)現(xiàn)文本溢出顯示省略號(hào)在做響應(yīng)式網(wǎng)頁(yè)的時(shí)候，我們要想在不同尺寸的設(shè)備下保證布局不會(huì)錯(cuò)亂，就需要對(duì)文字的長(zhǎng)度進(jìn)行限定。 css實(shí)現(xiàn)文本溢出顯示省略號(hào) 在做響應(yīng)式網(wǎng)頁(yè)的時(shí)候，我們要想在不同尺寸的設(shè)備下保證布局不會(huì)錯(cuò)亂，就需要對(duì)文字的長(zhǎng)度進(jìn)行限定。 基礎(chǔ)設(shè)置 在介紹下面的方法之前，我們先對(duì)所有的例子進(jìn)行基礎(chǔ)的樣式設(shè)置 /*基礎(chǔ)設(shè)置*/ div.box{ width: 100px; ...

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

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

    摘要：前言項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行多行文本超出顯示為省略號(hào)。單行文本省略文本溢出顯示省略號(hào)文本不會(huì)換行語(yǔ)法默認(rèn)值適用于所有元素當(dāng)對(duì)象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記，而是將溢出的部分裁切掉。 前言：項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行、多行文本超出顯示為省略號(hào)。這篇文章主要總結(jié)了小編解決此問(wèn)題的方法，有不足之處歡迎大家指正。 單行文本省略 showImg(https://segme...

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

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

    摘要：前言項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行多行文本超出顯示為省略號(hào)。單行文本省略文本溢出顯示省略號(hào)文本不會(huì)換行語(yǔ)法默認(rèn)值適用于所有元素當(dāng)對(duì)象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記，而是將溢出的部分裁切掉。 前言：項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行、多行文本超出顯示為省略號(hào)。這篇文章主要總結(jié)了小編解決此問(wèn)題的方法，有不足之處歡迎大家指正。 單行文本省略 showImg(https://segme...

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

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

    摘要：前言項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行多行文本超出顯示為省略號(hào)。單行文本省略文本溢出顯示省略號(hào)文本不會(huì)換行語(yǔ)法默認(rèn)值適用于所有元素當(dāng)對(duì)象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記，而是將溢出的部分裁切掉。 前言：項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行、多行文本超出顯示為省略號(hào)。這篇文章主要總結(jié)了小編解決此問(wèn)題的方法，有不足之處歡迎大家指正。 單行文本省略 showImg(https://segme...

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

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

0條評(píng)論

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