# 文本溢出

Posted: 09.23.2019

# 单行文本溢出

单行文本溢出没有兼容性的问题。

ThisismyfirsttimethatIwouldliketoinformyouthat

Hello my name is lynch and my hobby is not writing code

.overflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

# 多行文本溢出

多行文本溢出只适用于使用 webkit 内核的浏览器

• Chrome, Safari, Edge, Opera 有效
• IE, Firefox 无效

ThisismyfirsttimethatIwouldliketoinformyouthatasdhjasdyqwgagvsdfqwejhasdftsadbhj123asdgh

ThisismyfirsttimethatIwouldliketoinformyouthatasdhjasdyqwgagvsdfqwejhasdftsadbhj123asdgh

Hello my name is lynch and my hobby is not writing code. I like to find a girlfriend

Hello my name is lynch and my hobby is not writing code. I like to find a girlfriend

从上面的例子可以看出，设置多行文本溢出后，剩下的内容并没有消失，而是在下面一行继续展示。

这也就意味着，我们必须控制好 container 的高度。

如果高度过高，我们会把不希望展示的内容一起展示出来。

.overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word; /* 用来打破某个单词 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* 行数 */
}