鍍金池/ 問(wèn)答/HTML5  HTML/ 文字超出顯示...

文字超出顯示...

如何實(shí)現(xiàn)文字超出顯示內(nèi)容顯示...并在 ...后緊跟一個(gè)查看更多按鈕
想要實(shí)現(xiàn)的效果為

clipboard.png

回答
編輯回答
我甘愿

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
實(shí)現(xiàn)多行溢出省略，-webkit-line-clamp的屬性值代碼顯示幾行溢出省略

如果后面還跟著more字體的話，可以js判斷元素內(nèi)的字體長(zhǎng)度，如果達(dá)到了溢出的情況可以添加一個(gè)絕對(duì)定位的元素內(nèi)容為More，或者利用偽元素content生成一個(gè)絕對(duì)定位的元素

2018年3月18日 08:28
編輯回答
眼雜

使用類控制超出部分用...代替，

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width:100px;//(具體值自己定)

顯示用：width: 100%;overflow: auto;white-space: normal;

2017年6月9日 02:22
編輯回答
陪我終

如果要加個(gè)more的話，好像只能js寫(xiě)了，判斷有多少字，太多的話就直接截取前面一部分再加...跟more

2018年2月9日 08:33
編輯回答
祈歡

定寬可以 text.slice(0, 50) + '...' 與 text 互相切換。對(duì)應(yīng)的是 展開(kāi) 和 收起 的互相切換。

2017年12月26日 08:48
編輯回答
舊言

還是要用js判斷。。如果一行顯示比較簡(jiǎn)單，如果兩行，第二行采用float

2017年6月11日 20:42
編輯回答
妖妖

這不是float 做的事嗎，你可以試試float:right

2017年1月31日 04:46
編輯回答
替身

這個(gè)用純 css 就可以實(shí)現(xiàn)了，http://yunkus.com/text-overfl...，然后再配合布局（比如：flex 布局）就可以實(shí)現(xiàn)了。

2017年7月21日 06:53
編輯回答
安于心

這個(gè)問(wèn)題我也糾結(jié)過(guò)很久，到目前也沒(méi)有很好的解決方案，最終的辦法是js根據(jù)屏幕大小截取字符個(gè)數(shù)（因?yàn)橹辉试S顯示兩行，所以還要監(jiān)聽(tīng)resize獲取屏幕寬度再做截?。?，然后再做more的處理。

如果有很好的方案的話麻煩@我一下，謝謝

2017年10月8日 07:24
編輯回答
真難過(guò)

這個(gè)需要后端一個(gè)中文截取功能，substr(0,100,$title).'....'

2017年5月29日 17:12
編輯回答
陪她鬧

這里有兩個(gè)難點(diǎn)：

  1. 文字是多行的 (單行就不會(huì)這么尷尬了)
  2. ... 沒(méi)有在容器最右側(cè)，而是需要緊跟一個(gè) "MORE" （否則chrome也是有解決方案的）

所以目前來(lái)說(shuō)就是4個(gè)字，實(shí)現(xiàn)不了。

看來(lái) CSS 排版還是有很多邊邊角角的缺陷存在。

要不試試漸變蒙板？非要點(diǎn)點(diǎn)點(diǎn)干什么 漸變遮罩文字溢出

2017年8月29日 21:53