黑科技：CSS定製多行省略

時間  2019-11-06
標籤 科技 css 定製 省略 欄目 CSS 简体版
原文   原文鏈接

轉載請註明出處：http://hai.li/2017/03/08/css-...css

什麼是多行省略？

什麼是多行省略

當字數多到必定程度就顯示省略號點點點。最初只是簡單的點點點，以後花樣愈來愈多，點點點加下箭頭，點點點加更多，點點點加更多加箭頭...。多行省略就是大段文字後面的花式點點點。html

同行這麼作：

同行這麼作

  1. Google Plus用透明到白色的漸變遮罩，漸變遮罩在文字超出的時候才顯示，但沒法擠出文字，且背景只能純色，不理想。ios

  2. 豌豆莢則更簡單粗暴換行顯示，換行顯示則文字未超出時依然顯示 ...xxx，更不理想！web

我這樣作：

我這樣作

在QQ瀏覽器的頁面用了一個原創的mod-more UI組件，實現了定製的多行省略，仍是純CSS的，領先同行一大截，贊！贊！贊！只惋惜，mod-more組件的高度是固定的。對mod-more進一步進化，完美自適應高度，並且代碼簡化易用。瀏覽器

怎麼作到的？

怎麼作到的

原理詳解！

按需顯示...更多

按需顯示...更多

<!doctype html><html><body>
<style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*測試*/</style>
<div style="font-size:12px;line-height: 18px;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
    <div style="float:right;margin-left: -50px;width:100%;position:relative;background: hsla(229, 100%, 75%, 0.5);">騰訊成立於1998年11月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承「一切以用戶價值爲依歸」的經營理念，爲億級海量用戶提供穩定優質的各種服務，始終處於穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。</div>
    <div style="float:right;position:relative;width:50px;height: 108px;color:transparent;background: hsla(334, 100%, 75%, 0.5);">placeholder</div>
    <div style="float:right;width:50px;height:18px;position: relative;background: hsla(27, 100%, 75%, 0.5);">...更多</div>
</div>
</body></html>

利用右浮動原理——右浮動元素從右到左依次排列，不夠空間則換行。藍色塊、粉色塊、橙色塊依次右浮動，藍色塊高度小於6行文字時，橙色塊在右邊，藍色塊高度大於6行文字時，左下角恰好夠橙色塊排列的空間，因而橙色塊就到左邊了測試

按需顯示...更多2

<!doctype html><html><body>
<style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*測試*/</style>
<div style="font-size:12px;line-height: 18px;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
    <div style="float:right;margin-left: -50px;width:100%;position:relative;background: hsla(229, 100%, 75%, 0.5);">騰訊成立於1998年11月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承「一切以用戶價值爲依歸」的經營理念，爲億級海量用戶提供穩定優質的各種服務，始終處於穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。</div>
    <div style="float:right;position:relative;width:50px;height: 108px;color:transparent;background: hsla(334, 100%, 75%, 0.5);">placeholder</div>
    <div style="float:right;width:50px;height:18px;position: relative;background: hsla(27, 100%, 75%, 0.5);left: 100%;-webkit-transform: translate(-100%,-100%);">...更多</div>
</div>
</body></html>

進一步將橙色塊偏移到正確位置就大功告成了！細心的同窗會發現，將橙色塊加上漸變底就是Google Plus在用的方案。spa

文字溢出截斷

文字溢出截斷

<!DOCTYPE html><html><body>
<style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*測試*/</style>
<div style="font-size: 12px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: red;line-height: 18px;position: relative;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
    <div style="color:#000;display: inline;vertical-align: top;background: rgb(204, 204, 204);">騰訊成立於1998年11月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承「一切以用戶價值爲依歸」的經營理念，爲億級海量用戶提供穩定優質的各種服務，始終處於穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。</div>
</div>
</body></html>

-webkit-line-clamp是webkit內核的私有css屬性，用於進行多行省略，在安卓和ios上全支持。但它固定使用省略號，沒法直接擴展。並且自帶了溢出截斷邏輯，做用於容器高度。仔細考察可發現它使用的省略號是單字符…，能夠用文字css屬性如font-size,letter-spacing,color等控制。3d

文字溢出截斷2

<!DOCTYPE html><html><body>
<style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*測試*/</style>
<div style="font-size: 36px;letter-spacing: 28px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: red;line-height: 18px;position: relative;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
    <div style="color:#000;display: inline;font-size: 12px;vertical-align: top;letter-spacing: 0;background: rgb(204, 204, 204);">騰訊成立於1998年11月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承「一切以用戶價值爲依歸」的經營理念，爲億級海量用戶提供穩定優質的各種服務，始終處於穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。</div>
</div>
</body></html>

設置外容器的font-size、letter-spacing、color，並在子容器裏恢復就能夠單獨設置省略號。這裏外容器設置font-size的值等於2倍行高（餘下要撐開的寬度可用letter-spacing補足，也可僅用font-size撐開所有的寬度），color:transparent可讓line-clamp既擠出文字又不截斷容器高度，外容器高度達到7行而不是默認表現的6行，從而達到須要的溢出截斷效果code

clipboard.png

合體！定製多行省略

合體！定製多行省略

<!DOCTYPE html><html><body>
<style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*測試*/</style>
<div style="position: relative;line-height:18px;-webkit-animation: width-change 8s ease infinite;max-height: 108px;">
    <div style="font-size: 36px;letter-spacing: 28px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: transparent;line-height: 18px;position: relative;">
        <div style="font-size:12px;color: #000;display: inline;vertical-align: top;letter-spacing: 0;">
        騰訊成立於1998年11月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承「一切以用戶價值爲依歸」的經營理念，爲億級海量用戶提供穩定優質的各種服務，始終處於穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。
        </div>
        <div style="position:absolute;top: 0;left: 50%;width: 100%;height: 100%;letter-spacing: 0;color: #000;font-size: 12px;background: rgba(173, 216, 230, 0.5);">
            <div style="float: right;width: 50%;height: 100%;background: rgba(255, 192, 203, 0.5);"></div>
            <div style="float: right;width: 50%;height: 108px;background: hsla(223, 100%, 50%, 0.19);"></div>
            <div style="float: right;width: 50px;height: 18px;position: relative;background: rgba(255, 165, 0, 0.5);" class="">... 更多</div>
        </div>
    </div>
</div>   
</body></html>

將-webkit-line-clamp實現的文字溢出截斷代碼爲主體，疊加絕對定位同步的按需顯示...更多結構。由於絕對定位，這裏使用百分比簡化代碼。最外包一層結構限制最大高度。orm

clipboard.png

<!DOCTYPE html><html><body>
<style>
/*
 * 行高 h
 * 最大行數 n
 * ...更多容器的寬 w
 * 字號 f
 */

@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}
.ellipsis {
    position: relative;
    background: rgb(230, 230, 230);
    width: 260px;
    max-height: 108px; /* h*n */
    line-height: 18px; /* h */
    overflow: hidden;
    -webkit-animation: width-change 8s ease infinite;
}
.ellipsis-container {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6; /* n */
    font-size: 50px; /* w */
    color: transparent;
}
.ellipsis-content {
    color: #000;
    display: inline;
    vertical-align: top;
    font-size: 12px; /* f */
}
.ellipsis-ghost {
    position:absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    color: #000;
}
.ellipsis-ghost:before {
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 100%;
}
.ellipsis-placeholder {
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 108px; /* h*n */
}
.ellipsis-more {
    float: right;
    font-size: 12px; /* f */
    width: 50px; /* w */
    height: 18px; /* h */
    margin-top: -18px; /* -h */
}
</style>
<div class="ellipsis">
    <div class="ellipsis-container">
        <div class="ellipsis-content">騰訊成立於1998年11月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承「一切以用戶價值爲依歸」的經營理念，爲億級海量用戶提供穩定優質的各種服務，始終處於穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。</div>
        <div class="ellipsis-ghost">
            <div class="ellipsis-placeholder"></div>
            <div class="ellipsis-more">...更多</div>
        </div>
    </div>
</div>   
</body></html>

爲何這麼作？

line-clamp有3宗罪

text-align:justify一塊兒用會使省略號和文字相疊

text-align:justify一塊兒用會使省略號和文字相疊

超出截斷後會截掉部分行高

超出截斷後會截掉部分行高

省略號出如今單詞中間

省略號出如今單詞中間

定製省略固然某問題啦

text-align:justify時如期所示，沒問題！

text-align:justify時如期所示，沒問題！

截斷時如期所示，也沒問題！

截斷時如期所示，也沒問題！

省略號在有單詞時如期顯示，依然沒問題！

省略號在有單詞時如期顯示，依然沒問題！

更別說點點點花樣增改

後退，我要開始裝逼了

簡單增改文字加連接只是小case

簡單增改文字加連接只是小case

用折角仍是其餘圖片表示文本溢出能夠增添趣味

用折角仍是其餘圖片表示文本溢出能夠增添趣味

溢出時顯示溢出字數增長了實用用途

溢出時顯示溢出字數增長了實用用途

這B裝的beautiful

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程