新闻标题过长怎样用css代码控制省略号

新闻资讯发布时间2012.10.7.浏览数：1757

【css代码控制标题省略号】当标题的长度大于容器的长度时，我们可以用text-overflow来生成“...”而不是简单的截取。 text-overflow的定义是: Name: text-overflow-mode Value: clip | ellipsis | ellipsis-word clip......广州外贸网站建设www.3gonet.com.cn三行网络公司为您详细介绍 - 请往下阅读》

css代码控制标题省略号

当标题的长度大于容器的长度时，我们可以用text-overflow来生成“...”而不是简单的截取。

text-overflow的定义是:

Name: text-overflow-mode
Value: clip | ellipsis | ellipsis-word

clip : 　不显示省略标记（…），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。
ellipsis-word : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）。

广州建网站总结：可以用它来生成“...”而不是用函数，用该CSS对于蜘蛛来说，截取的部分依然是可见的（只是没有显现）。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text-overflow:ellipsis，输出的标题是完整的。

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

广州建网站总结：如果我们要给p标签定义text-overflow:ellipsis就可以这么写：

p {
white-space: nowrap;
width: 100%;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}

广州外贸网站建设公司选三行网络—— “匠心精琢、凝聚经典”是三行网络公司的设计理念，每一件作品无不是三行网络公司设计团队的倾力倾心之作。无论策划、创意还是视觉设计，三行网络公司设计团队均力求完美，而这样的完美不仅是视觉的享受，更是商业价值、品牌理念与视觉的共荣之作！

《新闻标题过长怎样用css代码控制省略号》此文由三行网络公司原创，转载请保留原文链接，谢谢！

【关键词标签】css代码控制标题省略号 (PC+手机)响应式网站建设