div css 多行文本 最后一行自动显示省略号

wlzzlw 2014-06-04 10:16:52
条件:

div css javascript html
如何实现多行文本中最后一行文本最后自动显示省略号(如三行文本,文本自动换行后,第三行很长,自动显示省略号)
...全文
22593 18 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
laly欣 2016-08-11
  • 打赏
  • 举报
回复
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
丰云 2016-05-24
  • 打赏
  • 举报
回复
看我的博客最后一个小技巧吧,纯css,超简单哦——传送门
eric_uugames 2016-02-02
  • 打赏
  • 举报
回复
.truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 亲测. webkit浏览器可以这样.
qq2460857094 2015-01-01
  • 打赏
  • 举报
回复
div{display: -webkit-box;text-overflow: ellipsis;overflow : hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;} -webkit-line-clamp: 3;这个设置为显示3行,超过3行则最后用省略号代替,目前在移动设备上使用正常。
qq2460857094 2015-01-01
  • 打赏
  • 举报
回复
用CSS3可以实现多行时,最后一行用省略号截取,在youtube上见到过。不过对于老版本浏览器就难于兼容了 还可以看一下这里:http://www.zhangxinxu.com/wordpress/?p=230
driverin 2014-12-12
  • 打赏
  • 举报
回复
楼主有找到合适的方法解决吗?
傲雪星枫 2014-06-05
  • 打赏
  • 举报
回复
以前在手机版的微博看过,现在改版了,没有这种效果了。 他也是有判断字数的,当超过一定字数,例如比三行多吧。就会用css在<div>的右下角铺一张半透明的... png
wlzzlw 2014-06-05
  • 打赏
  • 举报
回复
有没有计算高度,根据高度来判断是否要求加省略号的(像三楼高手说的)
  • 打赏
  • 举报
回复
div relative定位定高定宽,内部放个个浮动层浮动在右下角,内容为...覆盖最后的文字,不过最后显示的一个文字有可能被遮盖住,漏点出来

<style>
.ellips{position:relative;width:100px;height:60px;line-height:20px;overflow:hidden;background:#eee}
.ellips .dot{position:absolute;right:0px;bottom:0px;height:20px;background:#fff}
</style>
<div class="ellips"><div class="dot">...</div>div relative定位定高定宽,内部放个个浮动层浮动在右下角字</div>
巴山虎 2014-06-05
  • 打赏
  • 举报
回复
比如内容456个字 一行100个字,那么就是计算出一共5行,最后一行56个字。 然后str.substring(-1,56),把倒数的56个字截掉,再加上省略号就可以了 但是要注意中英文字符间的计算差异。
巴山虎 2014-06-05
  • 打赏
  • 举报
回复
截取字符串是一种办法。 要让JS识别最后一行 ,似乎做不到,除非通过计算行高、字数什么的
xuzuning 2014-06-05
  • 打赏
  • 举报
回复
<body>
<div id='view' style='width:200px;height:70px;overflow:auto'></div>
<script>
s = '条件:<br>\
div   css  javascript  html<br>\
如何实现多行文本中最后一行文本最后自动显示省略号(如三行文本,文本自动换行后,第三行很长,自动显示省略号)';

el = document.getElementById('view');
n = el.offsetHeight;
for(i=10; i<s.length; i++) {
  el.innerHTML = s.substr(0, i);
  if(n <= el.scrollHeight) break;
}
el.style.overflow = 'hidden';
el.innerHTML = s.substr(0, i-3) + '...';

</script>
wlzzlw 2014-06-04
  • 打赏
  • 举报
回复
楼上能否给个页面? (如果只显示一行,那个png就不用了吧?如何判断要不要加png)
傲雪星枫 2014-06-04
  • 打赏
  • 举报
回复
微博的做法是直接over-flow:hidden,然后在最后,覆盖一张...的透明PNG的。
wlzzlw 2014-06-04
  • 打赏
  • 举报
回复
谢谢楼上 能理解 确实挺麻烦的啊
张运领 2014-06-04
  • 打赏
  • 举报
回复
以前看到过这样一个逻辑。 大概意思是这样:给目标元素中,一个字一个字的往里添加,然后计算添加一个字后,元素的高度,然后记录(最初肯定是一行,当高度变化一次,就说明增加了一行,然后把行数就执行加1操作),然后就根据这个计算得到的行数,就可以判断,在什么时间,把字符串截断,显示为省略号了。。。 能理解这个逻辑不?那就试试用代码写出来吧。 好像是有点麻烦。。。。
wlzzlw 2014-06-04
  • 打赏
  • 举报
回复
好像不行吧,要得是多行的效果
a296792033 2014-06-04
  • 打赏
  • 举报
回复
text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧