css 多行显示两行
导读：CSS 多行显示两行HTML 所有元素都默认是单行显示，当内容过多时，超出部分就会被隐藏起来。但有时候我们需要显示多行内容，这时就需要用到 CSS 的多行展示功能。在 CSS 中，可以通过设置 white-space 属性为 pre 或 p...
CSS 多行显示两行HTML 所有元素都默认是单行显示，当内容过多时，超出部分就会被隐藏起来。但有时候我们需要显示多行内容，这时就需要用到 CSS 的多行展示功能。
在 CSS 中，可以通过设置 white-space 属性为 pre 或 pre-wrap 来实现多行展示。
例如，下面的代码将文本内容显示为两行：
```
这是一段两行的文本内容。
```white-space 属性有以下几种取值：
- normal：默认值，合并空白字符，换行符和制表符会被当作空格处理。- pre：保留空白字符，不自动换行。- nowrap：合并空白字符，并在必要时截断文本，不自动换行。- pre-wrap：保留空白字符，并自动换行。- pre-line：保留换行符，并自动换行。
以上面的代码为例，如果把 white-space 改为 pre，那么文本将在一行内显示，而如果换成 pre-wrap，文本则会在两行以上的空间中自动展开，直到所有内容都被显示完为止。
p {
white-space: pre-wrap;
}
除了可以设置在 p 标签中，也可以设置在其他块级元素中，比如 div。
div {
white-space: pre-line;
}
使用多行展示功能时，要注意元素的尺寸和位置，有时候会影响到页面的布局。但当需要显示多行文本时，CSS 多行展示功能是非常实用的。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css 多行显示两行
本文地址： https://pptw.com/jishu/540181.html