css实现截取显示...

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

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

本文介绍了一种使用CSS实现文本截断并添加省略号的方法，通过设置特定样式，可以在不同浏览器上实现一致的文字溢出效果。

以前对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: