css 超出换行(css如何设置超出换行)

CSS（层叠样式表）是一种用于美化Web页面的技术。在 CSS 中，我们可以使用各种样式规则来控制文字的显示方式。其中，超出换行是一个常见的问题，可以通过 CSS 来解决。 要控制文本超出换行的样式，我们可以使用“text-overflow”属性来设置。这个属性有三个取值：clip、ellipsis 和 string。clip 表示文本超出后直接截断，ellipsis 表示文本超出后显示省略号，string 则是可以自定义一个字符串来代替超出的文本。 例如:

p {
width: 200px; /* 限定文本宽度 */
white-space: nowrap; /* 不允许换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}

上面的代码将会使段落超出部分被截断，并且用省略号来表示被隐藏的文本。这样，就可以有效地防止超出部分影响页面显示。 虽然“text-overflow”属性可以解决文本超出换行的问题，但是需要注意的是，这个属性只对单行文本有效。对于多行文本，可以使用“-webkit-line-clamp”属性来控制文本的行数，并使用省略号来表示。

p {
width: 200px; /* 限定文本宽度 */
height: 45px; /* 限定文本高度 */
display: -webkit-box; /* 使用 -webkit-box 渲染 */
-webkit-box-orient: vertical; /* 文本垂直布局 */
-webkit-line-clamp: 2; /* 最多显示两行文本 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}

上面的代码将会使段落限定在两行内，超出部分使用省略号表示。这样，在页面上就可以清楚地看到限定行数内的文本，而超出部分则在视觉上被隐藏。 总之，通过上面所演示的一些 CSS 技巧，我们可以很好地控制文本超出换行的样式，从而更好地优化页面显示效果。