div css javascript html
如何实现多行文本中最后一行文本最后自动显示省略号（如三行文本，文本自动换行后，第三行很长，自动显示省略号）
-
等级
本版专家分：0结帖率 100% -
条件：
div css javascript html
如何实现多行文本中最后一行文本最后自动显示省略号（如三行文本，文本自动换行后，第三行很长，自动显示省略号）展开阅读全文
-
等级
本版专家分：10
-
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
-
等级
本版专家分：0
-
好像不行吧，要得是多行的效果
-
等级
本版专家分：14820勋章
-
-
黄花
2014年1月 Web 开发大版内专家分月排行榜第二
2013年12月 Web 开发大版内专家分月排行榜第二
-
-
以前看到过这样一个逻辑。
大概意思是这样：给目标元素中，一个字一个字的往里添加，然后计算添加一个字后，元素的高度，然后记录（最初肯定是一行，当高度变化一次，就说明增加了一行，然后把行数就执行加1操作），然后就根据这个计算得到的行数，就可以判断，在什么时间，把字符串截断，显示为省略号了。。。
能理解这个逻辑不？那就试试用代码写出来吧。
好像是有点麻烦。。。。
-
等级
本版专家分：0
-
谢谢楼上 能理解 确实挺麻烦的啊
-
等级
本版专家分：1241勋章
-
- 优秀版主 2016年10月优秀小版主
-
- 铜牌 2017年1月 总版技术专家分月排行榜第三
-
-
红花
2017年2月 PHP大版内专家分月排行榜第一
2017年1月 PHP大版内专家分月排行榜第一
-
-
黄花
2017年7月 PHP大版内专家分月排行榜第二
2017年6月 PHP大版内专家分月排行榜第二
2017年5月 PHP大版内专家分月排行榜第二
2017年4月 PHP大版内专家分月排行榜第二
2017年3月 PHP大版内专家分月排行榜第二
2016年12月 PHP大版内专家分月排行榜第二
2016年11月 PHP大版内专家分月排行榜第二
2016年10月 PHP大版内专家分月排行榜第二
2016年9月 PHP大版内专家分月排行榜第二
2016年7月 PHP大版内专家分月排行榜第二
2016年6月 PHP大版内专家分月排行榜第二
2016年3月 PHP大版内专家分月排行榜第二
2016年2月 PHP大版内专家分月排行榜第二
2016年1月 PHP大版内专家分月排行榜第二
2015年11月 PHP大版内专家分月排行榜第二
2015年10月 PHP大版内专家分月排行榜第二
2015年8月 PHP大版内专家分月排行榜第二
2015年7月 PHP大版内专家分月排行榜第二
2015年6月 PHP大版内专家分月排行榜第二
2015年4月 PHP大版内专家分月排行榜第二
2015年3月 PHP大版内专家分月排行榜第二
2015年2月 PHP大版内专家分月排行榜第二
2015年1月 PHP大版内专家分月排行榜第二
2014年12月 PHP大版内专家分月排行榜第二
2014年11月 PHP大版内专家分月排行榜第二
2014年10月 PHP大版内专家分月排行榜第二
2014年9月 PHP大版内专家分月排行榜第二
2014年8月 PHP大版内专家分月排行榜第二
2014年7月 PHP大版内专家分月排行榜第二
2014年6月 PHP大版内专家分月排行榜第二
-
-
微博的做法是直接over-flow:hidden，然后在最后，覆盖一张...的透明PNG的。
-
等级
本版专家分：0
-
楼上能否给个页面？
（如果只显示一行，那个png就不用了吧？如何判断要不要加png）
-
等级
本版专家分：1241勋章
-
- 优秀版主 2016年10月优秀小版主
-
- 铜牌 2017年1月 总版技术专家分月排行榜第三
-
-
红花
2017年2月 PHP大版内专家分月排行榜第一
2017年1月 PHP大版内专家分月排行榜第一
-
-
黄花
2017年7月 PHP大版内专家分月排行榜第二
2017年6月 PHP大版内专家分月排行榜第二
2017年5月 PHP大版内专家分月排行榜第二
2017年4月 PHP大版内专家分月排行榜第二
2017年3月 PHP大版内专家分月排行榜第二
2016年12月 PHP大版内专家分月排行榜第二
2016年11月 PHP大版内专家分月排行榜第二
2016年10月 PHP大版内专家分月排行榜第二
2016年9月 PHP大版内专家分月排行榜第二
2016年7月 PHP大版内专家分月排行榜第二
2016年6月 PHP大版内专家分月排行榜第二
2016年3月 PHP大版内专家分月排行榜第二
2016年2月 PHP大版内专家分月排行榜第二
2016年1月 PHP大版内专家分月排行榜第二
2015年11月 PHP大版内专家分月排行榜第二
2015年10月 PHP大版内专家分月排行榜第二
2015年8月 PHP大版内专家分月排行榜第二
2015年7月 PHP大版内专家分月排行榜第二
2015年6月 PHP大版内专家分月排行榜第二
2015年4月 PHP大版内专家分月排行榜第二
2015年3月 PHP大版内专家分月排行榜第二
2015年2月 PHP大版内专家分月排行榜第二
2015年1月 PHP大版内专家分月排行榜第二
2014年12月 PHP大版内专家分月排行榜第二
2014年11月 PHP大版内专家分月排行榜第二
2014年10月 PHP大版内专家分月排行榜第二
2014年9月 PHP大版内专家分月排行榜第二
2014年8月 PHP大版内专家分月排行榜第二
2014年7月 PHP大版内专家分月排行榜第二
2014年6月 PHP大版内专家分月排行榜第二
-
-
以前在手机版的微博看过，现在改版了，没有这种效果了。
他也是有判断字数的，当超过一定字数，例如比三行多吧。就会用css在<div>的右下角铺一张半透明的... png
-
等级
本版专家分：402 -
截取字符串是一种办法。
要让JS识别最后一行 ，似乎做不到，除非通过计算行高、字数什么的
-
等级
本版专家分：402
-
比如内容456个字
一行100个字，那么就是计算出一共5行，最后一行56个字。
然后str.substring(-1,56)，把倒数的56个字截掉，再加上省略号就可以了
但是要注意中英文字符间的计算差异。
-
版主等级
本版专家分：395875勋章
-
- 探花 2017年 总版技术专家分年内排行榜第三
-
-
进士
2018年总版新获得的技术专家分排名前十
2013年 总版技术专家分年内排行榜第五
-
-
金牌
2018年5月 总版技术专家分月排行榜第一
2018年4月 总版技术专家分月排行榜第一
2018年2月 总版技术专家分月排行榜第一
2017年8月 总版技术专家分月排行榜第一
-
-
银牌
2018年3月 总版技术专家分月排行榜第二
2017年11月 总版技术专家分月排行榜第二
2016年2月 总版技术专家分月排行榜第二
2014年2月 总版技术专家分月排行榜第二
2013年4月 总版技术专家分月排行榜第二
-
-
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>
- div css 多行文本 最后一行自动显示省略号
div{display: -webkit-box;text-overflow: ellipsis;overflow : hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;...这个设置为显示3行，超过3行则最后用省略号代替，目前在移动设备上使
- 文本多行最后一行溢出隐藏显示省略号
有时候，需要一段文字，最后一行溢出隐藏显示省略号，这时候css已经不行了（我没找到方法）。 在网上略查了一下，大致思路是这样的： 把一段文字一个一个的放进p标签中，监测换行，达到我们需要的行数以后，把文本...
- 多行文本溢出最后一行显示省略号
现在的浏览器都支持text-overflow:ellipsis属性，用来实现单行文本的溢出显示省略号，但是这个属性并不支持多行文本。那么有没有方法在多行文本上实现同样的效果呢？ 1、-webkit-line-clamp Webkit支持一个名...
- css 实现多行文本末尾显示省略号
省略号使用绝对定位添加，开头部分避免突兀使用c3渐变背景颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=...
- css_消除多行文本溢出显示省略号对最后一行行高的影响
问题:多行文本溢出显示省略号会不显示最后一行下部分的行高 这是标题文字的HTML 这是标题文字的css样式 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 解决...
- HTML多行文本溢出控制最后一行显示省略号样式
HTML多行文本溢出显示省略号一、text-overflow属性二、单行文本溢出显示省略号三、多行文本溢出控制最后一行显示省略号样式 一、text-overflow属性 text-overflow具有三个值。 一个是clip，修剪文本。 第二个就是...
- 纯CSS实现多行文本溢出显示省略号（兼容不同浏览器）
1、单行文本溢出显示省略号 单行文本溢出显示省略号比较简单，设置white-space: nowrap避免换行，再设置text-overflow: ellipse即可。 <style> .single-line { width: 200px; line-height: 1.4; ...
- CSS多行文本超出部分显示省略号
/* 强制文本一行显示 */ overflow:hidden; /* 超出的部分隐藏 */ text-overflow:ellipsis; /* 超出的文本显示省略号 */ } 2、多行文本省略号 div{ overflow: hidden; /* 超出的部分隐藏 */ text-...
- css多行显示省略号同时将最后一行只显示一半，查看全文效果
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，...
- css实现多行文本超出省略号显示，兼容所有浏览器
float 特性实现多行文本截断 基本原理 有个三个盒子 div，粉色盒子左浮动，浅蓝色盒子和黄色盒子右浮动， 当浅蓝色盒子的高度低于粉色盒子，黄色盒子仍会处于浅蓝色盒子右下方。 如果浅蓝色盒子文本过多，高度超过...
- 小程序CSS实现单行和多行文本溢出显示省略号……
如果是一行显示的时候，写在view里的样式，会在最后显示省略号，但要是写在text组件中设置这个样式的话就是最后多出来的字隐藏了。 .textview{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap } ...
- 兼容ie的多行文本溢出隐藏，并显示省略号
简单说明：在文本最后一行结尾添加一个遮罩（透明 → 白）遮罩上放省略号。 效果如下↓ html部分 <div class="text"></div> css部分 text { word-break:break-all; // 单词打断，可以让显示美观一些 ...
- CSS-通过css来实现单行或者多行文本移除显示省略号('...')
单行文本：我们看一下如下效果这种情况随处可见，实现起来也很简单。 <p> 友情，能够随时说话找一个能随时随地和你聊天的人真的很难。 </p>p{ width:10em;... }多行文本...
- css多行文本溢出显示省略号（兼容ie）
在日常编写页面中，我们经常遇到内容行数过多时，需要出现 “...” 来处理。但是又要考虑IE浏览器或IE内核浏览器的兼容性。 普通实现方法： display: -webkit-box; ...-webkit-box-orient: vertical;...
- css 多行文本溢出显示省略号(…)，显示3行多出的显示省略号
在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-...-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实...
- 单行文本和多行文本溢出时显示省略号的css设置
单行文本 方法一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
- 多行文本末尾溢出文字显示省略号问题
我之前作为开发者、亦或者作为一个先行者，都被问过很多次一个问题：“多行文本末尾的溢出怎么搞定？”。 说实话我对css理解的的确一般，但是对我个人而言我第一个想到的办法永远都是： { overflow:hidden; ...
- 多行文本溢出变成省略号【附带失效解决代码】
很多的朋友们都会用CSS实现单行文本溢出超出部分显示省略号，但是如何控制不仅仅是单行而是指定行数文本呢？看完这篇文章你就会了！有代码！ HTML内容如下： <div class="wrap"> 我是CSDN的吴小迪啊！喜欢我...
- 【css/js】限制一行和多行文字数量，超出部分用省略号显示
一、第一种方法 1. 先了解border属性 &amp;amp;amp;amp;amp;lt;style type=&amp;amp;amp;amp;quot;text/css&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt; #div3{ height: ...
- 前端单行或多行文本显示，溢出文本显示省略号，兼容IE多行溢出隐藏
文本单行显示,溢出的显示省略号 对于一个 单行 文本标签，...如果想超出的部分以省略号显示， 再加上 text-overflow:ellipsis;white-space: nowrap; 属性。 { overflow: hidden; text-overflow:ellipsis; ...
- CSS3 - 文本超出隐藏显示省略号（单行 / 多行）
如果实现单行文本的溢出显示省略号（…）应该都知道用 text-overflow:ellipsis 属性来，当然还需要加宽度 width 属来兼容部分浏览。 /* 注意需要给width 注意还需要把容器变为块级元素(因为需要给宽度) */ overflow...
- css文本超出隐藏显示省略号 实现一行两行多行
css文本超出隐藏显示省略号 实现一行两行多行 看似十分简单的标题截断效果，但是竟然没有一个统一 CSS 属性实现标准，需要用到一些奇淫妙计来实现，一般来说，在做这样文字截断效果时我们更多是希望： 兼容性好...
- css多行超出显示点_css如何实现单行、多行文本超出显示省略效果
本篇文章给大家带来的内容是关于css如何实现单行、多行文本超出显示省略效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。单行文本省略.ellipsis-line {border: 1px solid #f70505;padding: 8...
- css实现单行、多行文本超出显示省略号(jq优化)
前言：项目中我们经常遇到这种需求，需要对单行、多行文本超出显示为省略号。这篇文章主要总结了小编解决此问题的方法，有不足之处欢迎大家指正。 单行文本省略 .ellipsis-line { border: 1px solid #f70505; ...
- CSS实现单行(多行)文本超出部分用省略号显示
该文写的是CSS如何实现单行以及多行文本末尾的超出部分用省略号来表示。 目录 1、单行超出 2、多行超出 正文 现在有着一个这样的div，需要两个效果，一个是单行超出部分用省略号表示，一个是多行超出部分用省略号...
- css 实现div内显示一行、两行或三行，超出部分用省略号显示
一、div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二、div内显示两行或三行，超出部分用省略号显示 overflow: hidden; text-overflow: ellipsis; ...
- css来实现单行或者多行文本移除显示省略号
单行文本： <p> 友情，能够随时说话找一个能随时随地和你聊天的人真的很难。 </p>p{ width:10em;... }多行文本：方法一(这个属性比较合适WebKit浏览器或移动端（绝...
- css多行超出显示点_css实现单行、多行文本溢出显示省略号(…)
一、单行文本溢出显示省略号(…)省略号在ie中可以使用text-overflow:ellipsis了，但有很多的浏览器都需要固定宽度了，同时ff这些浏览器并不支持text-overflow:ellipsis设置了，下文来给各位整理一下兼容各浏览器显示...
- CSS 单行／多行文本溢出显示省略号（...）的实现
作者:WangMin 格言:努力做好自己喜欢的每...实现文本超出显示省略号的常见属性 1）overflow: hidden 这里我们需要注意到一点：这里的overflow并不是设置为父级元素div的属性，而是给需要文本省略的标签的属性，需要和o
- CSS单行文本以及多行文本溢出显示省略号解决方案
文章目录CSS单行文本以及多行文本显示省略号解决方案单行文本溢出显示省略号多行文本溢出显示省略号第一种效果：仅显示3行文本溢出部分显示省略号第二种效果：仅显示3行文本溢出部分显示省略号，并且鼠标上浮显示...