首页css超过一行出现省略号

css超过一行出现省略号

时间: 2024-11-09 20:22:47 浏览: 177

要实现在CSS中超过一行出现省略号的效果，你可以使用以下方法： 1. 单行文本溢出显示省略号[^1]: ```css .content { white-space: nowrap; // 禁止文本换行 overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 } ``` 这样，如果内容超过容器宽度，超出的部分会被自动截断并显示省略号。 2. 多行文本溢出显示省略号（适用于`<p>`元素或其他高度可设置的块级元素）: ```css .content { display: -webkit-box; // 对于Webkit浏览器（如Chrome和Safari） display: -moz-box; // 对于Firefox display: box; overflow-wrap: break-word; // 自动换行并在单词之间断裂 overflow: hidden; text-overflow: ellipsis; line-height: normal; // 设置正常行高以适应省略号 } ``` 这里的`overflow-wrap: break-word`允许文本在单词间换行，而不是整个行。记得在HTML中应用这些样式到相应的元素上，比如`<p class="content">...</p>`。

阅读全文