活用CSS巧妙解决超长文本内容显示问题

当前位置 : 首页 > 网页制作 > CSS > 活用CSS巧妙解决超长文本内容显示问题

活用CSS巧妙解决超长文本内容显示问题

来源: 作者: 时间:2016-02-18 10:13
现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行显示,并且截取一定的长度,截取的地方用省略号代替。虽然用动态语言可以对其控制,但是
现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行显示,并且截取一定的长度,截取的地方用省略号代替。虽然用动态语言可以对其控制,但是这样做是不利于搜索引擎收录的,活用可以巧妙地解决这个问题,请看下面的代码:  
 
代码一:用于非表格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;一起使用。*/ 
 
}
 
 
Tag:
网友评论

<