中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css單行截斷和多行截斷的用法

發布時間:2021-09-10 15:38:46 來源:億速云 閱讀:549 作者:chen 欄目:web開發

這篇文章主要介紹“css單行截斷和多行截斷的用法”,在日常操作中,相信很多人在css單行截斷和多行截斷的用法問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”css單行截斷和多行截斷的用法”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!

單行截斷:

span {
  display: inline-block; // 如果不是block元素,還需要設置這個。
  width: 150px; // 超出的寬度
  overflow: hidden; // 超出隱藏
  text-overflow: ellipsis; //超出用省略號
  white-space: nowrap; // 不換行
}

多行截斷:

多行截斷有好幾種方法,

1: 最簡單,使用-webkit-line-clamp , 當然了,只能用在webkit內核瀏覽器, 并且不支持自定義點擊展開的樣式。

p {
  width: 400px; // 超過這個寬度
  text-overflow: ellipsis; // 使用省略號
  display: -webkit-box; // 必須使用這個
  overflow: hidden;// 必須使用,超出隱藏
  -webkit-line-clamp: 4; // 必需設置,
  -webkit-box-orient: vertical; // 設置里面元素排列順序
  text-align: justify; // 里面問題排列方式
}

2: 也是面試中回答的方式,使用偽類。。。這個由于要使用js判斷是否超出,因此適用于,你已經知道是大段文字的情景。 但是面試官不是很滿意這個方式,嗚嗚嗚

p{
   position: relative;
   height: 36px; // 面試官說這個是定死的,所以不靈活。。。感覺很奇怪啊,不是死的話,怎么知道什么情況溢出?
   overflow: hidden;
   line-height: 18px;  
}
p::after{ // 這個是一直有省略號,所以需要js判斷是否超出,如果超出的話,就加一個class。 
     content: '...';
     position: absolute;
     bottom:0;
     right: 0;
}

3:使用float, 挺復雜的,不喜歡float......, 使用float時候,省略號是一個dom節點,因此可以添加事情和樣式, 自定義程度高!

<div class="container">
        <div class="content">騰訊成立于1998年11月,是目前中國領先的互聯網增值服務提供商之一。成立10多年來,騰訊一直秉承“一切以用戶價值為依歸”的經營理念,為億級海量用戶提供穩定優質的各類服務,始終處于穩健發展狀態。2004年6月16日,騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。</div>
        <div class="standard"></div>
        <div class="more">...更多</div>
</div>

其中standard是一個標準,超過它的高度時候,就會顯示省略號,container是個容器,超過他的最大高度,就hidden。 三個div都float:right,其中content的margin-left:-standard的寬度,把standard給讓出來,讓standard出現在左側。

.container{
    max-height: 54px; // 最大高度
    overflow: hidden; // 超出隱藏
    line-height: 18px; // 方便計算幾行。。
    font-size:12px;
}
.container div{ // 三個元素都設置float
    float: right;
}
.content{
    margin-left: -50px; // 這是第一個元素,由于他寬度是100%,所以需要給standard位置。
    width:100%;
    position:relative;
    background: hsla(229, 100%, 75%, 0.5)
}
.standard{
    width: 50px; //寬度隨意, 需要與上面margin-left一樣
    height: 54px; // 超出這個高度會出現more元素
    position:relative;
    color:transparent;
    background: hsla(334, 100%, 75%, 0.5);
}
.more{  
    width:50px; // 這個元素可自定義,寬度
    height:18px;
    position: relative;
    left: 100%; // 確定位置,
    transform: translate(-100%,-100%);// 確定位置
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 20%, #fff); // 這是使用漸變,因為more元素會覆蓋住content元素。
}

總結: 可以直接使用float方法,方便自定義樣式及監聽事件,并且兼容性好,是暫時最完美的解決方案。

到此,關于“css單行截斷和多行截斷的用法”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注億速云網站,小編會繼續努力為大家帶來更多實用的文章!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

古交市| 黔西| 津市市| 铜川市| 华蓥市| 华安县| 新源县| 喀喇沁旗| 突泉县| 潮安县| 英超| 余姚市| 新兴县| 镇远县| 元氏县| 怀仁县| 朔州市| 饶河县| 北京市| 巩留县| 长寿区| 平乐县| 安丘市| 湘潭县| 白城市| 和林格尔县| 涿鹿县| 深水埗区| 盐津县| 德安县| 平乡县| 红安县| 宁国市| 布拖县| 辉南县| 万宁市| 左贡县| 四平市| 宁海县| 苍梧县| 武宣县|