多余字以省略号显示的css样式

最新推荐文章于 2024-07-24 10:23:02 发布

whh_lydia

最新推荐文章于 2024-07-24 10:23:02 发布

阅读量4.1k

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/whh_lydia/article/details/47083011

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>多余字以省略号显示</title>
	</head>
	<body>
		<style type="text/css">
			.abc {
			background-color: #CCC;
			width: 200px;
			overflow:hidden;
			text-overflow:ellipsis;/*文字溢出的部分隐藏并用省略号代替*/
			white-space:nowrap;/*文本不自动换行*/
			</style>
        <div class="abc" title="我是标题，我很长，很长，真的很长，已经长的令人无法接受了！！！">我是标题，我很长，很长，真的很长，已经长的令人无法接受了！！！
        </div> 
	</body>
</html>

注：

语法：　　text-overflow : clip | ellipsis

参数：　　clip : 　不显示省略标记（...），而是简单的裁切　　（clip这个参数是不常用的！）　　ellipsis : 　当对象内文本溢出时显示省略（...）

说明：　　设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。　　

请您注意，text-overflow:ellipsis属性在FF中是没有效果的。　

示例：　　div { text-overflow : clip; } 　　

text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。

关于text-overflow属性如何应用，我们作如下的说明讲解：

text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。