鍍金池/ 問答/HTML5  HTML/ 怎么解決文字在容器中限制行數(shù)及限制字?jǐn)?shù)

怎么解決文字在容器中限制行數(shù)及限制字?jǐn)?shù)

直接上圖吧，下圖是我想要達(dá)成的效果，可以限制文字簡(jiǎn)介為2行，同時(shí)第二行不會(huì)占滿一整行，能夠讓更多顯示在第二行
clipboard.png
這是我現(xiàn)在達(dá)成的效果。。。
clipboard.png
求教SF的各位大佬！

回答
編輯回答
爛人

兩個(gè)思路哈
1.簡(jiǎn)單理解 如果你容器寬度固定，字號(hào)固定，你就算一個(gè)合適的字?jǐn)?shù) 然后處理一下字符串就好
2.就像樓上大神說的加一個(gè)遮罩層，你說看不到省略號(hào) 你把省略號(hào)直接放到遮罩層上不就可以啦
總之我看還是需要截取字符串的

2017年1月5日 18:35
編輯回答
柚稚

第一種方案：直接截字，后端處理前端處理都可以，這要保證你的寬度是固定的
第二種方案：將“...更多”絕對(duì)定位放在右小腳,用相同的背景色壓在上面，缺點(diǎn)是會(huì)出現(xiàn)半個(gè)字的情況。
第三種方案：如果都是 webkit 端，可以考慮
`
.box {

width: 400px; 
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

}
`

2017年3月23日 07:33