国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

css之多行文本輸出

來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 18:53:59
文檔

css之多行文本輸出

css之多行文本輸出:看到簡介標(biāo)注為只能顯示3行文本,多于3行顯示3行,本準(zhǔn)備采取字符串截取蒙混過關(guān)(不能原諒的事情是對自己沒有要求,簡直沒有下限),后查看了網(wǎng)上的解決方案,特此分享。思路現(xiàn)在假設(shè)想要顯示的文本行數(shù)是N行,首先設(shè)定文本容器的max-height = N 乘以
推薦度:
導(dǎo)讀css之多行文本輸出:看到簡介標(biāo)注為只能顯示3行文本,多于3行顯示3行,本準(zhǔn)備采取字符串截取蒙混過關(guān)(不能原諒的事情是對自己沒有要求,簡直沒有下限),后查看了網(wǎng)上的解決方案,特此分享。思路現(xiàn)在假設(shè)想要顯示的文本行數(shù)是N行,首先設(shè)定文本容器的max-height = N 乘以
看到簡介標(biāo)注為只能顯示3行文本,多于3行顯示3行,本準(zhǔn)備采取字符串截取蒙混過關(guān)(不能原諒的事情是對自己沒有要求,簡直沒有下限),后查看了網(wǎng)上的解決方案,特此分享。

思路

現(xiàn)在假設(shè)想要顯示的文本行數(shù)是N行,首先設(shè)定文本容器的max-height = N 乘以 line-height,第N行顯示的文本為部分文本 + ... + 展開全部。設(shè)置文本容器的字體顏色為背景色,偽元素before和after的content都為文本內(nèi)容。借助偽元素before顯示(N - 1)行元素,z-index = 1(在文本容器、before偽元素、after偽元素、[展開全部]按鈕中確保before偽元素z-index最大)。after偽元素的padding-right寬度為[展開全部]按鈕的寬度(單位為em),text-indent = (N - 1) * [展開全部]按鈕的寬度(如何理解縮進(jìn)? 通過設(shè)置after偽元素的padding-right為第N行的[展開全部]按鈕留位置,由于第1行、第2行...第(N - 1)行都少顯示[展開全部]按鈕寬度的字體,所以,為了確保偽元素after在第N行中顯示正確,需要向左縮進(jìn)(N - 1) 乘以 [展開全部]按鈕的寬度)

效果圖

wKioL1gquUnA2iquAADM6BeOegg095.png-wh_651x-s_3494154119.png

完整代碼

<div class="desc" title="Jennifer Joanna Aniston (born February 11, 1969)[1] is an American actress, producer, and businesswoman.[2] The daughter of Greek actor John Aniston and American actress Nancy Dow, Aniston gained worldwide recognition for portraying Rachel Green on the popular television sitcom Friends (1994–2004), a role which earned her a Primetime Emmy Award, a Golden Globe Award, and a Screen Actors Guild Award. The character was widely popular during the airing of the series and was later recognized as one of the 100 greatest female characters in United States television">
 Jennifer Joanna Aniston (born February 11, 1969)[1] is an American actress, producer, and businesswoman.[2] The daughter of Greek actor John Aniston and American actress Nancy Dow, Aniston gained worldwide recognition for portraying Rachel Green on the popular television sitcom Friends (1994–2004), a role which earned her a Primetime Emmy Award, a Golden Globe Award, and a Screen Actors Guild Award. The character was widely popular during the airing of the series and was later recognized as one of the 100 greatest female characters in United States television
 <button>更多</button>
</div>
.desc {
 position: relative;
 width: 400px;
 /*用像素表示,不要用em,以免造成不同瀏覽器下計(jì)算出現(xiàn)小數(shù)點(diǎn)取舍不同導(dǎo)致1像素的差距【行高*截取行數(shù)】*/
 overflow: hidden;
 max-height: 72px;
 font-size: 16px;
 line-height: 24px;
 overflow: hidden;
 word-wrap: break-word;
 /*強(qiáng)制打散字符*/
 word-break: break-all;
 background: #fff;
 /*同背景色*/
 color: #fff;

 &:after,
 &:before {
 content: attr(title);
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 /*實(shí)際文本顏色*/
 color: #000;
 }
 &:before {
 display: block;
 overflow: hidden;
 /*顯示在最上面,展示前面的(截取行數(shù)-1)行字符*/
 z-index: 1;
 /*根據(jù)行高和截取行數(shù)調(diào)整,值為[(截取行數(shù)-1)*行高]*/
 max-height: 48px;
 /*同背景色*/
 background: #fff;
 }
 &:after {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 /*截取行數(shù)*/
 -webkit-line-clamp: 3;
 /*行首縮進(jìn)字符數(shù),值為[(截取行數(shù)-1)*尾部留空字符數(shù)]*/
 text-indent: -8em;
 /*尾部留空字符數(shù)*/
 padding-right: 4em;
 }
 button {
 width: 40px;
 height: 20px;
 font-size: 12px;
 padding: 0;
 outline: 0;
 position: absolute;
 right: 0;
 bottom: 0;
 }
}

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

css之多行文本輸出

css之多行文本輸出:看到簡介標(biāo)注為只能顯示3行文本,多于3行顯示3行,本準(zhǔn)備采取字符串截取蒙混過關(guān)(不能原諒的事情是對自己沒有要求,簡直沒有下限),后查看了網(wǎng)上的解決方案,特此分享。思路現(xiàn)在假設(shè)想要顯示的文本行數(shù)是N行,首先設(shè)定文本容器的max-height = N 乘以
推薦度:
標(biāo)簽: 多行 文本 css
  • 熱門焦點(diǎn)

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国产成人区 | 97一级毛片全部免费播放 | 亚洲精品在线第一页 | 国产精品网址 | 永久视频在线观看 | 国产成人亚洲综合一区 | 亚洲欧美一区二区三区久久 | 欧美日韩高清一本大道免费 | 国产区二区| 美日韩精品 | a一级毛片| 日韩欧美网 | 五十路在线播放 | 亚洲第8页 | 亚洲欧美另类第一页 | 国产成人精品一区二区三在线观看 | 精品欧美一区二区三区 | 欧美日韩国产码高清综合人成 | 久久精品一区二区国产 | 国产精品不卡在线观看 | 久久国产精品成人免费 | 精品国内自产拍在线视频 | 3女bbbwww | 亚洲色图日韩精品 | 日韩欧美在线视频 | 欧美色老头 | 久久婷婷久久一区二区三区 | 亚洲图片欧美在线 | 亚洲欧美日韩国产综合 | 中文字幕第一页亚洲 | 国产精品久久久久久一级毛片 | 98成人网| 亚洲成人精品久久 | 一本久久精品一区二区 | 91欧洲在线视精品在亚洲 | 欧美 日韩 国产 在线 | 国产一区二区三区久久 | 亚洲色图欧美 | 国产欧美日韩在线 | 91资源在线播放 | 国产特级全黄一级毛片不卡 |