07.css入门笔记-文字溢出效果

文章目录

前言

一、文字溢出

1.单行溢出-使用省略号显示步骤

2.多行溢出-使用省略号显示步骤

总结

---

前言

有的时候文本框里的文字很多，但是我们不需要全部显示，这个时候可以使用文字溢出效果，用省略号 来显示多余的部分。分为单行溢出和多行溢出

---

一、文字溢出

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内核的浏览器才可以使用

---

总结

以上是关于文字溢出效果的两种不同方式，分为单行溢出和多行溢出