文字溢出？别慌！这篇攻略帮你搞定！

嘿，各位前端较小伙子们！是不是时常遇到网页上的文字太较长，超出容器的时候，不了解该怎么办？别担心，这可是个老生常谈的问题。今天我就来给你们良好良好唠唠嗑，教你们怎么用 HTML5 来处理文字溢出的问题。保证简洁粗暴，一看就懂！

哪些是文字溢出？

简洁就是你写了一段话，这段话的较长度较高于了它所在的容器的较宽度。这时候，这一些超出的一部分就会“溢”出来。 极度舒适。 直接让用户看到不美观啊！所以我们需要一些方法来控制这一些溢出内容。

常用的方法有哪些？

方法一：`overflow` 和 `text-overflow` 的组合

这是最常用的方法了。它需要用到两个 CSS 属性：`overflow` 和 `text-overflow`。这两个属性配合起来就能很良好地解决文字溢出的问题。

white-space: nowrap; overflow: 要我说... hidden; text-overflow: ellipsis;

让我来阐述一下：

• white-space: nowrap当前这个属性的作用是阻止文本换行。也就是说文本会一直体当前一行上，直到超出容器的较宽度为止。
• overflow: hidden当前这个属性的作用是隐藏超出容器边界的内容。默认情况下超出一部分会被直接裁剪掉。
• text-overflow: ellipsis当前这个属性的作用是在文本被裁剪掉后体现省略号。这样能够让用户了解还有更更多的内容没有体现出来。