当前位置:  Web服务器/前端>html/css

CSS控制长文本内容显示(截取的地方用省略号代替)

 
    发布时间:2014-1-14  


    本文导语:  自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法。 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一...

  自动换行问题,正常字符换行是比较合理的,而连续的数字英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法

  现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行显示,并且截取一定的长度,截取的地方用省略号代替。虽然用动态语言可以对其控制,但是这样做是不利于搜索引擎收录的,活用CSS可以巧妙地解决这个问题,请看下面的代码:
代码一:用于非表格LIspan等都可以

.text-overflow {
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度布局 iis7站长之家超出部分的内容 */
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;一起使用。*/

}

相关文章推荐:


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3