溢出的文字省略号显示+文本换行问题

目录

1.单行文本溢出显示省略号--必须满足三个条件

2.多行文本溢出显示省略号 

3.文本换行问题

---

1.单行文本溢出显示省略号--必须满足三个条件

①先强制一行内显示文本

white-space: nowrap;(默认normal自动换行)

②超出部分隐藏

overflow: hidden;

③文字用省略号替代超出的部分

text-overflow: ellipsis;

2.多行文本溢出显示省略号 

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端(移动端大部分是webkit内核)。

overflow: hidden;

text-overflow: ellipsis;

/*弹性伸缩盒子模型显示*/

display: -webkit-box;

/*限制在一个块元素显示的文本的行数*/

-webkit-line-clamp: 2;

/*设置或检索伸缩盒对象的子元素的排列方式*/

-webkit-box-orient: vertical;

3.文本换行问题

普通文本👇（文本在盒子内）

 属性word-break: break-all; //强制换行