css实现截取显示...

最新推荐文章于 2024-09-25 14:52:26 发布

最新推荐文章于 2024-09-25 14:52:26 发布 · 123 阅读

本文介绍了一种使用CSS实现文本截断并添加省略号的方法。通过设置特定样式，如width, overflow, text-overflow及white-space，可以在浏览器中优雅地处理过长文本的展示问题。

以前对css没有了解的时候经常使用字符串截取来实现文字加省略号的展现形式，今天对css进行了一下研究，发现css也提供了截取显示的功能

css代码如下：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style type="text/css">
			 .ea_articleList_element{width:300px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
		</style>
	</head>
	<body>
		<span class=ea_articleList_element>
			文章模块列表2fdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfds
		</span>
		<div class=ea_articleList_element>
			文章模块列表2fdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfds
		</div>
	</body>
</html>

展现效果如下：

chrome: