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 文本省略号设置的更多相关文章
- CSS文本简单设置
文本的设置直接影响到用户对界面的感受,好的文本设置能够让用户对界面有一种赏心悦目的感受,在这地方我们来简单的说说说对文本设置的时候,有哪些格式. 文本设置的时候我们应该注意什么: 平时我们文本设置的时 ...
- css 文本省略号显示
文本省略号是非常常见的需求,而省略号展示又通常分为俩种情况折行和不折行.不折行: div { white-space:nowrap;/* 规定文本是否折行 */ overflow: hidden;/* ...
- css文本省略号
这里记录下如何用CSS实现单行.多行文本溢出容器的时候用省略号代替溢出部分. 单行文本溢出容器时显示省略号的CSS实现方法 /* 规定当内容溢出元素框(容器)时隐藏 */ overflow: hidd ...
- css 实现省略号. text-overflow: ellipsis; 同时设置四个属性才可以.
这个同时需要. text-overflow ; overflow ; white-space ; width ; 四个属性才可以. <!DOCTYPE html> <htm ...
- css文本超出省略号
终于完成了项目了,今天我就分享自己在项目中比较实用的一些功能的实现,第一个就是纯css文本超出省略号 /* 文本单行超出省略号 */ .textels { overflow: hidden; text ...
- CSS 文本字体颜色设置方法(CSS color)
CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...
- 四大伪类,css鼠标样式设置,reset操作,静止对文本操作
07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...
- CSS多余文本省略号显示
CSS多余文本省略号显示 本次案例代码是在 elementui 当中的 table 组件中实际需求 当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用 对于过长文本进行单行省 ...
- css文本属性用法总结
稍稍总结了下css文本的一些属性用法,自己忘记的时候也可以用来查查,不用去查网站那么麻烦. 下面是部分总结,也希望对其他人有用 文本修饰 (1)text-decoration: 文本修饰(横线) 4 ...
随机推荐
- 【SpringMVC】统一异常处理
一.需求 二.统一异常处理解决方案 2.1 定义异常 2.2 异常处理 2.3 配置统一异常处理器 2.4 异常处理逻辑 一.需求 一般项目中都需要作异常处理,基于系统架构的设计考虑,使用统一的异常处 ...
- nginx的gzip模块详解以及配置
文章来源 运维公会:nginx的gzip模块详解以及配置 1.gzip模块作用 gzip这个模块无论在测试环境还是生产环境都是必须要开启,这个模块能高效的将页面的内容,无论是html或者css.j ...
- zabbix server for Centos 6.3
1.安装LNMP 参照http://lnmp.org/install.html 2.安装zabbix service 2.1下载zabbix,并解压 wget http://nchc.dl.sourc ...
- pure::variants — 产品线变体管理工具
pure::variants 是德国 pure-systems 公司的产品,其目的是帮助企业实现对产品线的变体管理,提高企业项目资产的复用效率.pure::variants 的核心理念是运用产品线管理 ...
- WebAPI ModelValidata(模型验证)——DataAnnotations 解析
爱做一个新的项目,在该项目中的 WebAPI 中对数据的验证用到了 ModelValidata, 以前也没有用到过,也不是很熟悉,在查看了一些资料和代码后稍有了解,这里记录下来. 这里主要介绍的是 S ...
- 六、用DataContractSerialize类序列化XML
一.层次结构 基类:XmlObjectSerializer 派生类: DataContractSerializer NetDataContractSerializer DataContractJson ...
- Tomcat 配置及优化
Tomcat配置优化,主要在于优化tomcat运行模式,并发参数和线程数, 以及jvm堆内存和垃圾回收相关参数的优化.下面将逐一介绍. 1. tomcat的3种运行模式 1.1 BIO - 同步阻塞I ...
- 我们什么时候应该在C程序中使用指针?
回答: 传递大型结构喜欢服务器请求或响应数据包. 实现链表和二叉树. 使用GPIO或硬件寄存器. 从函数中获取地址或更新值(通过引用调用) 创建动态数组. 使用函数指针创建回调函数. 注意:除此之外, ...
- 2019牛客暑期多校训练营(第九场)The power of Fibonacci——循环节&&CRT
题意 求 $\displaystyle \sum_{i=1}^n F_i^m $,($1 \leq n\leq 10^9,1 \leq m\leq 10^3$),答案对 $10^9$ 取模. 分析 ...
- oracle查询数据库连接数相关
select username,count(username) from v$session where username is not null group by username;--查询各个用户 ...