你这样写文字最后没有出现省略号
时间: 2024-03-13 19:47:48 浏览: 54
非常抱歉,是我疏忽了。可能是因为我在演示时使用了较短的文本,导致没有出现省略号。在实际应用中,如果文本长度超过了容器的宽度,应该会出现省略号。
以下是更新后的 HTML 和 CSS 代码,希望这次可以正常显示省略号:
HTML 代码:
```
<div class="container">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus massa eget diam suscipit, vel finibus neque gravida. Nulla facilisi. Aenean euismod purus eget libero scelerisque, vel volutpat velit lobortis. Sed sodales diam non justo bibendum, id dignissim augue lacinia. Sed vel nibh vitae ligula bibendum faucibus. Donec laoreet, nulla eu vehicula posuere, enim erat dignissim erat, in hendrerit nulla turpis vel velit. Sed quis enim vel velit suscipit tempor. Sed nec blandit quam. Sed eget nibh vel magna feugiat aliquet. Sed convallis, mauris sed lobortis posuere, felis enim tincidunt nibh, eget malesuada tellus nunc vitae purus. Ut id malesuada massa. Sed eget velit ut libero elementum lobortis. Sed cursus massa eget diam suscipit, vel finibus neque gravida. Nulla facilisi. Aenean euismod purus eget libero scelerisque, vel volutpat velit lobortis. Sed sodales diam non justo bibendum, id dignissim augue lacinia. Sed vel nibh vitae ligula bibendum faucibus. Donec laoreet, nulla eu vehicula posuere, enim erat dignissim erat, in hendrerit nulla turpis vel velit. Sed quis enim vel velit suscipit tempor. Sed nec blandit quam. Sed eget nibh vel magna feugiat aliquet. Sed convallis, mauris sed lobortis posuere, felis enim tincidunt nibh, eget malesuada tellus nunc vitae purus. Ut id malesuada massa. Sed eget velit ut libero elementum lobortis.</p>
</div>
```
CSS 代码:
```
.container {
width: 200px;
height: 100px;
overflow: hidden;
}
.text {
height: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
```
感谢您的指正,我会更加注意审慎回答问题。
阅读全文