<text>标签文本只显示两行,并且宽度不够时只显示两行,案例
时间: 2023-08-16 08:06:06 浏览: 51
可以使用CSS的text-overflow属性结合white-space和overflow属性来实现这个效果。下面是一个示例代码:
HTML代码:
```html
<div class="text-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae ante eget dolor malesuada dapibus.</p>
</div>
```
CSS代码:
```css
.text-container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.text-container p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
```
这里的text-container类是文本容器的样式,p标签是文本的样式。其中,text-overflow属性设置为ellipsis,表示文本溢出时用省略号表示;white-space属性设置为nowrap,表示文本不换行;overflow属性设置为hidden,表示文本溢出时隐藏。p标签的display属性设置为-webkit-box,表示将p标签作为一个弹性容器;-webkit-box-orient属性设置为vertical,表示子元素垂直排列;-webkit-line-clamp属性设置为2,表示只显示两行文本;overflow属性设置为hidden,表示文本溢出时隐藏。