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

您所在的位置:网站首页 文本不换行的样式属性 css中文本不换行显示省略号和换行后显示省略号

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

2024-06-04 00:16| 来源: 网络整理| 查看: 265

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

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

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

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

HTML 结构:

这是一段很长的文本,当容器宽度不足以容纳它时,会显示省略号... 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 结构:

这是一段很长的文本,当容器高度不足以容纳两行文本时,会显示省略号...

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

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

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3