首页 前端知识 css中文本不换行显示省略号和换行后显示省略号

css中文本不换行显示省略号和换行后显示省略号

2024-06-06 23:06:39 前端知识 前端哥 224 279 我要收藏

在CSS中,要实现文本不换行、显示省略号,和在文本换行两行后显示省略号,可以使用white-spaceoverflowtext-overflow-webkit-line-clamp等属性。以下是一些示例:

1. 文本不换行,显示省略号

当文本长度超出容器宽度时,你可以使用overflowwhite-spacetext-overflow属性来阻止文本换行并显示省略号(…)。

.ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 用省略号表示被裁剪的文本 */
}

HTML 结构:

<div class="ellipsis">这是一段很长的文本,当容器宽度不足以容纳它时,会显示省略号...</div>

2. 文本换行两行后显示省略号

要实现文本在换行两行后显示省略号,你需要使用-webkit-line-clamp属性,这个属性是WebKit浏览器特有的(如Chrome和Safari),不过大多数现代浏览器都支持它。请注意,这个属性并不是一个标准的CSS属性,因此在一些非WebKit浏览器中可能不起作用。

.ellipsis-lines {
  display: -webkit-box; /* 使用WebKit的弹性盒模型 */
  -webkit-line-clamp: 2; /* 限制显示的文本行数 */
  -webkit-box-orient: vertical; /* 设置盒模型的方向为垂直 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}

HTML 结构:

<div class="ellipsis-lines">
  这是一段很长的文本,当容器高度不足以容纳两行文本时,会显示省略号...
</div>

请注意,由于-webkit-line-clamp是一个非标准属性,它可能不会在所有浏览器中工作。在需要兼容更多浏览器的情况下,你可能需要使用JavaScript库或插件来实现类似的功能。

此外,text-overflow: ellipsis;只适用于overflow值为hidden的元素,并且white-space的值不能是nowrap以外的值(对于单行文本省略的情况)。对于多行文本省略的情况,你需要使用上面提到的WebKit特有的属性。

最后,确保你的容器有明确的宽度或高度,以便正确应用这些样式。如果容器没有设置尺寸,那么文本可能不会按预期的方式显示省略号。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11113.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!