css实现文字过长显示省略号的方法

最新推荐文章于 2023-02-06 11:38:35 发布

weixin_34097242

最新推荐文章于 2023-02-06 11:38:35 发布

阅读量118

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b1795dd6fb9a01e605fc752

本文介绍如何使用CSS实现网页中过长文本的自动截取并添加省略号，这种方法不仅简单而且有助于提高网站的SEO效果。

因为网页排版的需要，有些地方需要过长的问题加上省略号。比如：标题限制20个中文的宽度，超出的就用省略号代替。之前会使用程序截取的方法，不过使用css来截取更有利于SEO。

下面就介绍一下具体的使用方法

<div class="title">当对象内文本溢出时显示省略标记</div>
复制代码

这是一个例子，其实我们只需要显示如下长度：

css实现网页中文字过长截取...

title class应该这样写：

.title{ 
    width:300px; 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis;
}
复制代码

##说明：

1、宽度一定要设置，可以根据实际需求调整。

2、white-space:nowrap是禁止文字折行。

3、text-overflow表示当文本溢出时是否显示省略标记，有两个值：

clip：不显示省略标记（...），而是简单的裁切。

ellipsis：当对象内文本溢出时显示省略标记（...）
复制代码

4、overflow:hidden表示溢出内容为隐藏。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		  .test_demo_clip{
		  	text-overflow:clip; 
		  	overflow:hidden; 
		  	white-space:nowrap; 
		  	width:200px; 
		  	background:#ccc;
		  }
		  .test_demo_ellipsis{
		  	text-overflow:ellipsis; 
		  	overflow:hidden; 
		  	white-space:nowrap; 
		  	width:200px; 
		  	background:#ccc;
		  }
	</style>
</head>
<body>
	<h2>text-overflow : clip </h2>
	<div class="test_demo_clip">
	  不显示省略标记，而是简单的裁切条
	</div>
	<h2>text-overflow : ellipsis </h2>
	<div class="test_demo_ellipsis">
	  当对象内文本溢出时显示省略标记
	</div>
</body>
</html>
复制代码

转载于:https://juejin.im/post/5b1795dd6fb9a01e605fc752