css多行文本溢出时出现省略号的示例
发布时间：2018-06-13 15:25:37 作者：飞机 
我要评论
我要评论这篇文章主要介绍了css多行文本溢出时出现省略号的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
多行文本溢出时出现省略号
本文推荐2种方法。
1. css
tip：只兼容chrome内核的浏览器。ff不支持。
.box {
overflow: hidden; /* 溢出时不显示溢出的内容 */
text-overflow: ellipsis; /* 发生溢出时使用省略号代替 */
display: -webkit-box; /* chrome浏览器的私有属性。显示为box。 */
-webkit-box-orient: vertical; /* 垂直排列元素 */
-webkit-line-clamp: 2; /* 显示多少行 */
}
延展
word-wrap
| 关键字 | 描述 | 默认值 | 值 |
|---|---|---|---|
| word-wrap | 规定单词换行的条件 | normal, 在单词断字点处换行。 | break-word，在单词内换行。 |
| overflow-wrap,在css3时由word-wrap改为overflow-wrap |
text-overflow
| 关键字 | 描述 | 默认值 | 值 |
|---|---|---|---|
| test-overflow | 超出盒子的文本如何显示 | clip, 修剪文本。 ellipsis, 显示省略号。 string, 显示指定的文本。 |
white-space
| 关键字 | 描述 | 默认值 | 值 |
|---|---|---|---|
| white-space | 对待空白的方法和是否换行 | normal，空白会被浏览器忽略。 | pre, 保留空白。nowrap, 文本不换行。pre-wrap, 保留空白，正常换行。pre-line，合并空白，保留换行。 |
box-orient
这个属性还没有被浏览器支持。需要使用各自浏览器的私有属性。
| 关键字 | 描述 | 默认值 | 值 |
|---|---|---|---|
| box-orient | 子元素如何排序 | inline-axis，子元素沿着内联坐标轴（映射到横向）。 | horizontal, 指定子元素在一个水平线上从左到右排列。vertical, 从顶部向底部垂直排列子元素。block-axis, 子元素沿着块坐标轴（映射到垂直）。inherit，继承父元素。 |
line-clamp
只有chrome内核的浏览器支持自己的私有属性。
显示多少行块级元素。
2. js
使用js控制溢出文本如何显示的方法有很多。这里推荐一个脚本文件：ellipsis.js
ellipsis.js
| 名称 | 链接 |
|---|---|
| ellipsis 链接 | https://www.jsdelivr.com/package/npm/ellipsis.js |
| ellipsis | https://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.js |
| ellipsis git | https://github.com/glinford/ellipsis.js |
使用方法。
1、 引入脚本文件
<script src="https://cdn.jsdelivr.net/npm/ellipsis.js@0.1.3/ellipsis.js"></script>
2、 使用
var ell = Ellipsis({
lines: 3
})
var ele = document.getElementsByClassName('test')
ell.add(ele)
延展
它还有一些配置项。若不配置则使用默认值。
{
ellipsis: '...', // 默认显示的替代文本
debounce: 0, // 延迟多长时间后执行
responsive: true, // 是否有窗口大小改变时执行
className: '.clamp', // 默认操作具有这个类的元素。
lines: 2, // 默认只出现2行元素。
portrait: null, // 默认不改变，如果你想要在竖屏模式下有不同的行数，
break_word: true // 默认截断单词。
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要给大家介绍了使用CSS中的text-overflow属性来实现单行文本溢出显示省略号,文章中有详细的实现代码，感兴趣的同学可以自己动手尝试一下2023-09-07
这篇文章主要介绍了纯CSS实现“文本溢出截断省略”的几种方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2020-03-30
在实际开发的过程中，内容溢出是经常见到的。这篇文章主要介绍了浅谈css溢出机制探究，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-18
本篇文章主要介绍了纯CSS定制文本省略的方法大全，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-16- 这篇文章主要介绍了css实现文本溢出显示省略号的方法和示例分享，推荐给大家。2014-12-23
- li中的文本超出行宽自动隐藏，在一些新闻类的列表应用中还是比较实用的，具体的实现css样式如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-09-29
css overflow溢出隐藏(文字溢出时的自动隐藏处理)
css溢出隐藏一般用于当内容太大以至于无法适应指定的区域时，通过设置css下的overflow属性来隐藏其内容2013-03-07标题长度溢出时，自动显示为省略“...”的Css text-overflow
内容超出后自动隐藏并加省略标记(...)引号的Css text-overflow:ellipsis; o...2011-07-27CSS教程:关于文字溢出问题的研究-CSS教程-网页制作-网页教学网
首先引起对这个溢出问题进行研究是因为看到一个朋友的帖子，里面提到ie7下出现的文字溢出问题； 于是又重新翻了以前怿飞斑竹的帖子，他提到的是注释引起的文字溢出问题2008-10-17- 设置text-overflow: ellipsis;即可实现文本溢出省略的效果，本文主要介绍了CSS 文字溢出:ellipsis在IE上不起效果的解决，具有一定的参考价值，感兴趣的可以了解一下2023-11-23
最新评论