双11狂欢大促

盲盒赢 定制羽绒服

开启惊喜盲盒，抽取你的专属好礼

— 惊喜奖品抢先看 —

超级年卡50元券

周边70元券

手机支架

一拖三数据线

雨伞

运动毛巾

电动牙刷

VIP月卡

机械键盘

定制羽绒服

超级年卡50元券

周边70元券

手机支架

一拖三数据线

雨伞

运动毛巾

电动牙刷

VIP月卡

机械键盘

定制羽绒服

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

2014-06-04 10:16:52 2.3万阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

wlzzlw 墨衍会员 · AI 创作全网分发关注 + 加入社区

投研必备工具：Wind（万得）数据库快速入门 Wind数据库对于金融从业者来说是必不可少的一个软件，本文主要介绍了股票和债券的信息查找，帮助后续对数据进行分析，开始学习吧！阅读详情

条件：

div css javascript html
如何实现多行文本中最后一行文本最后自动显示省略号（如三行文本，文本自动换行后，第三行很长，自动显示省略号）

...全文

【可信数据空间-连接器技术架构设计方案】一句话概括连接器是可信数据空间的“数据保镖”和“外交官”。连接器就是一个部署在你本地的软件代理，它代表你安全地对外提供数据服务，确保在共享数据价值的同时，牢牢守住数据的所有权和控制权。它是实现“数据可用不可见”这一理想的关键技术部件。一个生动的比喻：银行的金库和接待员想象一下，你的数据就是藏在银行金库里的黄金和钞票。金库（你的内部数据库）：绝对安全，外人绝对不能进。接待员（连接器）：坐在银行大厅里，负责与客户打交道。客户向接待员提出请求：“我想取1000元。阅读详情

wlzzlw

JavaScript 87,983 成员 224,680 内容

+ 关注 + 加入社区

切换为时间正序

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

打赏
举报

有没有计算高度，根据高度来判断是否要求加省略号的（像三楼高手说的）

斯洛文尼亚旅游 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;

✦双11狂欢大促✦

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

相关推荐

双11狂欢大促

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