巧妙利用CSS截取标题长度让标题超出不显示的方法 - 站长之家 - 旺网-域名注册|特价虚拟主机|特价主机网站空间租用

		会员登陆入口 \| 会员注册
		业务QQ：281766668

当前位置：

首页 -

巧妙利用CSS截取标题长度让标题超出不显示的方法

最新资讯

	基于云架构的云虚拟主机与传统..

	如何做域名解析--详解A记录..

	例析网站伪原创文章方法

	巧妙利用CSS截取标题长度让..

	网站降权原因解析

	网页title标题标签的写法..

	dede织梦程序网站优化技巧..

	站群如何避免搜索引擎惩罚：谈..

	网站流量太大问题的几个应对策..

	几招组织网站运营活动的技巧

旺网在线客服

在线客服：
在线客服：
在线客服：
在线客服：

帮助中心

技术资讯

业界动态

帮助中心

网络营销

站长之家

资源中心

巧妙利用CSS截取标题长度让标题超出不显示的方法

发表时间： 2013-06-16 浏览次数： 2035 次

网站中经常出现一些标题比较长的文章，再调用标题列表时为了使整体布局美观，需要将标题控制在一行显示，并且截取一定的长度，截取的地方用省略号代替。虽然用动态语言可以对其控制，但是这样做是不利于搜索引擎收录的，所以你可以用CSS解决这个问题：

代码一：用于非表格LI或span等都可以
.text-overflow {
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

代码二：用于表格
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

分享到

QQ空间新浪微博腾讯微博网易开心网人人百度

旺网虚拟主机-特价虚拟主机-低价主机正在热销

最后更新: 2013/06/16 【关闭窗口】