1.普通单行截断省略
overflow:hidden; 文字长度超出限定宽度，则隐藏超出的内容）
text-overflow:ellipsis;（设置文字在一行显示，不能换行）
white-space:no-wrap;（规定当文本溢出时，显示省略符号来代表被修剪的文本）
这个方法的优点：
无兼容问题
响应式截断
文本溢出范围才显示省略号，否则不显示省略号
省略号位置显示刚好
缺点：
只支持单行文本截断
2.多行截断省略
-webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行)
display: -webkit-box;
-webkit-box-orient: vertica;
overflow: hidden;
text-overflow: ellipsis;
这个方法的兼容性一般
1.普通单行截断省略 这个方法的优点： 无兼容问题响应式截断文本溢出范围才显示省略号，否则不显示省略号省略号位置显...
CSS文本超出三行自动隐藏 显示省略号 CSS文本长度超出宽度如何显示省略号
css3渐变生成工具 文本 text-overflow clip 隐藏超出文本 ellipsis 超出部分使用省略...
1.基础的，单行文本溢出省略 1.1 CSS 代码 1.2 优点 无兼容问题 响应式截断 文本溢出范围才显示省略号...
CSS3文本 1.text-overflow clip: 隐藏超出文本ellipsis: 超出部分使用省略号 2....
文本超出部分省略显示: 例: 方法一：使用CSS溢出省略的方式解决，解决效果如下： css代码： white...
CSS实现多行文字截断以点的形式 本文CSS用的是SCSS 单行文本截断 See the Pen 单行文本截断 ...
CSS实现文本超出省略号 第一种：实现单行文本超出，显示省略号效果图： html部分：（下面的例子用的是同一个ht...
在项目中，经常会遇到文本超出问题，通常的解决办法是超出显示省略号，要么手动截取文本，要么设置css样式。在此我封装...
1、css有input超出文本显示省略号的样式：overflow: hidden;text-overflow:el...
本文标题：css学习---文本超出截断省略
本文链接：https://www.haomeiwen.com/subject/dmvybctx.html
网友评论