关于单行和多行文本溢出显示省略号的解决方案

今天研究了一下文本溢出显示省略号的方案，在网上一搜，资料很多，但是不是所有都是正确的。

单行文本溢出：

1.使用text-overflow:ellipsis;

这种方法在除firefox的其他浏览器中都支持，但是在firefox旧版本里不支持，听说在firefox7.0+支持，具体的分界线在哪里我没测试过，所以也不太清楚。但是我用firefox19.0.2测试过是支持的。需要注意的是要设置：white-space:nowrap;/*保证单行*/overflow:hidden;text-overflow:ellipsis;

.container {width:100px;height:100px;border:1px solid #000;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;
}

<div class="container">ldj ldj ldj ldj ldj ldj ldj ldjldj ldj ldj ldj ldj ldj ldj ldj ldjldj ldj ldj ldj ldj ldj ldj ldj ldjldj ldj ldj ldj ldj ldj ldj ldj ldjldj</div>

对于旧版本的firefox可以使用ellipsis.xml，把上面那句"text-overflow:ellipsis;"换成" -moz-binding:url('ellipsis.xml#ellipsis');"。需要注意的是，这个使Firefox浏览器下文字溢出省略号表示的ellipsis.xml文件要在页面的同一目录下，或是下一级目录下（我已测试），要是向上跨文件夹访问或绝对路径访问则失效。

2.使用margin负值定位，这个方法是兼容主流的浏览器的。（其实我觉得这个方法有点累赘，而且不灵活）

原理是：当文字内容足够长时就把隐藏在上面的省略号层给挤下来了。关键就是点点点所在div层的高度的绝对值要比其margin的绝对值大那么一点点。

<div class="text_overflow_4"><div class="text_con">这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。</div> <div class="text_dotted">…</div>
</div>

.text_overflow_4{width:24em; height:1.3em;overflow:hidden; zoom:1;
}
.text_overflow_4 .text_con{float:left;height:1.2em; margin-right:3em; overflow:hidden;
}
.text_overflow_4 .text_dotted{width:3em; height:1.31em; float:right; margin-top:-1.3em;
}

还有其他很多的方法，如：使用jquery来判断宽度是否溢出、使用伪类:after等等

多行文本溢出：

1.使用webkit支持的-webkit-line-clamp属性，不过这个只在webkit内核的浏览器中生效

2.使用-o-ellipsis-lastline，这个是从opera10.60才开始有的属性，所以只在opera10.60+生效

3.使用jquery,这个方案可以实现跨浏览器。原理是通过从后向前逐个删除末尾字符，直至元素的高度小于父元素高度

转载于:https://www.cnblogs.com/joyho/articles/2987597.html

关于单行和多行文本溢出显示省略号的解决方案相关推荐

css多行超出显示点_CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
如何设置省略号对其序号 html,CSS实现单行、多行文本溢出显示省略号（…）
最好用max-height来限制一下web 若是实现单行文本的溢出显示省略号同窗们应该都知道用text-overflow:ellipsis属性来,固然还须要加宽度width属来兼容部分浏览.浏览器实 ...
CSS基础：单行和多行文本溢出显示省略号
文本溢出后很多,会显示一些省略号,这个在很多网站都会这样做,从技术层次来分析有两种,一种是前端通过css或者JavaScript进行进行,还有一种是后端传递文字的时候,本身处理完长度,然后返回一个嗲有 ...
CSS+JS+Vue：单行、多行文本溢出显示省略号...的几种实现方式
背景:近期H5项目有个UI需求,单行文本超长时,超出的部分...省略且有一个查看的图标:否则正常展示. 在此背景下了总结下文本溢出的几种实现方式. 1.单行文本溢出[纯css] 效果: <!-- ...
html表格单行溢出省略号,单行、多行文本溢出显示省略号（css、js两种方法）
一.css方法 1.单行文本p{ width:100px; overflow: hidden; /*超出部分隐藏*/ white-space: nowrap; /*禁止换行*/ text-over ...
CSS 单行／多行文本溢出显示省略号（...）的实现
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章博客地址
CSS实现单行、多行文本溢出显示省略号（…
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! < ...
单行及多行文本溢出以省略号显示的方法总结
需求: 在前端页面布局中,经常会有因文字过多而影响页面排版.特别是在移动端页面中,因屏幕宽度不够段落文字如完全显示则会打乱布局.因此若段落文字能根据屏幕空余大小而显示就完美了,也就是若屏幕够大,段落文 ...
单行文本和多行文本溢出显示省略号
1.单行文本溢出显示省略号首先需要设置宽高 overflow: hidden; /*超出部分隐藏*/ text-overflow: ellipsis; /* 超出部分显示省略号 */ white-s ...

关于单行和多行文本溢出显示省略号的解决方案

关于单行和多行文本溢出显示省略号的解决方案相关推荐

最新文章

热门文章