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

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

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

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

　　<p class="title">当对象内文本溢出时显示省略标记</p>

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

　　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表示溢出内容为隐藏。

　　示例效果图：

　　#FormatImgID_0#

　　示例代码：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　<head>

　　<title>text-overflow</title>

　　</head>

　　<body>

　　.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>

　　<h2>text-overflow : clip </h2>

　　不显示省略标记，而是简单的裁切条

　　</p>

　　<h2>text-overflow : ellipsis </h2>

　　当对象内文本溢出时显示省略标记

　　</p>

　　</body>

　　</html>

【css实现文字过长显示省略号的方法】相关文章：