css不管宽度多少无论多少字数平均两行显示完整
时间: 2024-10-07 09:03:01 浏览: 20
CSS 超出隐藏实现限制字数的功能代码(多浏览器)
在CSS中,要让文本内容始终保持两行显示,并且适应不同宽度,你可以使用`line-height`属性配合`white-space`属性来实现。这里是一个基本的示例:
```css
.text-container {
display: -webkit-box; /* For Safari 3.1 to 6.0 */
display: -ms-flexbox; /* IE 10+ */
display: flex;
flex-wrap: wrap; /* Allow lines to break when necessary */
justify-content: space-between; /* Distribute items evenly between lines */
line-height: 1.5; /* 控制行高,让两行内容差不多高度 */
overflow: hidden; /* 隐藏超出部分的文字,如果需要滚动条可以去掉这行 */
}
.text-container p {
white-space: nowrap; /* 文本不会换行,会在容器内自动调整宽度 */
word-break: break-all; /* 如果单词太长会断开显示 */
}
```
然后将`.text-container`应用到需要限制宽度并保持两行展示的元素上,例如`<p>`标签:
```html
<div class="text-container">
这是一段很长很长的文字,可能会超过两行,但是我们希望它始终平均显示两行。
</div>
```
阅读全文