[分享]css内容超出出现省略号

发布于 2024-11-11 15:37:49

在网页开发时，经常会遇到文本内容过长的情况。这时候，我们希望能够在不改变文本内容的前提下，限制文本的宽度，同时在内容超出限制宽度时出现省略号。这个功能可以通过CSS来实现。首先，我们需要使用CSS的t...

在网页开发时，经常会遇到文本内容过长的情况。这时候，我们希望能够在不改变文本内容的前提下，限制文本的宽度，同时在内容超出限制宽度时出现省略号。这个功能可以通过CSS来实现。
首先，我们需要使用CSS的text-overflow属性来设置省略号的样式。该属性有三个取值：clip、ellipsis和string。其中，ellipsis表示使用省略号来表示被截断的文本内容。
然后，我们需要在文本容器中设置overflow属性为hidden，这样就可以隐藏超出限制宽度的内容了。
最后，我们需要设置容器的宽度，可以使用width属性或者max-width属性来设置。如果使用width属性，则容器的宽度会被固定为指定的宽度，如果使用max-width属性，则容器的宽度最大不能超过指定的宽度，但可以自适应窗口。
下面是一个例子：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS省略号示例</title>
	<style>
		.container {
			width: 200px;
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	</style>
</head>
<body>
	<p class="container">这里是一段很长很长很长的文本内容，需要使用省略号来表示。这里是一段很长很长很长的文本内容，需要使用省略号来表示。</p>
</body>
</html>

在上面的例子中，我们使用了一个class为container的p标签作为文本容器，然后设置了该容器的宽度为200px或最大为100%（根据窗口宽度自适应），并设置了overflow为hidden和text-overflow为ellipsis来实现省略号效果。
需要注意的是，text-overflow属性只对单行文本有效。如果要实现多行文本的省略号效果，需要使用一些其他的技巧，例如使用伪元素和JavaScript等。

css 教程

一个月内的热帖推荐

91云脑

Lv.1普通用户

62849 帖子	14 小组	291 积分

62849

帖子

小组

291

积分

关注作者

发帖	回复	分享

赞助商广告

本组热帖