注册

纯CSS实现文字超出部分隐藏并显示省略号

嗨豆壳技术文章 时间:2014-12-23 22:38:53 [ray]

网页排版中”文字超出部分隐藏并显示省略号“,一般都是通过PHP或者JS来实现的,对搜索引擎很不友好。本文介绍如何使用纯CSS实现这个功能,又能对搜索引擎更友好。。

<html>
<head>
<title>纯CSS实现文字超出部分隐藏并显示省略号</title>
<style type="text/css">
p{
width:200px;
overflow:hidden;/* 超出的部分隐藏 */
text-overflow:ellipsis;/* 超出的部分显示... */
-o-text-overflow:ellipsis;/* 兼容opera浏览器 */
white-space:nowrap;/* 强制不换行 */
}
div{
overflow:hidden;
display:block;
height:60px;
width:100px;
}
</style>
</head>
<body>
<p>这样处理对搜索引擎更友好,因为标题实际上并未被截字,而是局限于宽度而未被显示而已。</p>
<div>使用CSS3 text-overflow实现 文字超出部分隐藏并显示省略号的功能,对搜索引擎更友好。</div>
</body>
</html>

其实此功能主要使用了CSS3的text-overflow属性来实现。

text-overflow样式属性请参考://www.hi-dosc.com/css/text-overflow.html

标签

本文地址:https://www.hi-docs.com/article/109.html

上一篇:Centos 6.5+ 搭建SVN服务器(实用简写版)

下一篇:百度免费IP地址查询API,查询接口