文章目录
前言
有的时候文本框里的文字很多,但是我们不需要全部显示,这个时候可以使用文字溢出效果,用省略号 来显示多余的部分。分为单行溢出和多行溢出
一、文字溢出
1.单行溢出-使用省略号显示步骤
代码步骤如下(示例):
1.设置文字显示不全也必须强制在一行内显示
white-space: nowrap;
注:默认是自动换行,属性值是:white-space:normal;
2.设置溢出的文字隐藏
overflow: hidden;
3.设置文字溢出时用省略号显示
text-overflow: ellipsis;
2.多行溢出-使用省略号显示步骤
代码如下(示例):
overflow: hidden;
text-overflow: ellipsis;
<!-- 弹性伸缩盒子模型显示 -->
display: -webkit-box;
<!-- 限制在一个块元素显示的文本的行数 -->
-webkit-line-clamp: 2;
<!-- 设置或检索伸缩盒对象的子元素的排列方式 -->
-webkit-box-crient: vertical;
缺点:有很大的兼容性问题,只有移动端(大部分是webkit)和webkit内核的浏览器才可以使用
总结
以上是关于文字溢出效果的两种不同方式,分为单行溢出和多行溢出