利用CSS截取标题长度方法

ttx9n

网站中经常出现一些标题比较长的文章，再调用标题时为了使整体布局美观，需要将标题控制在一行显示，并且截取一定的长度，截取的地方用省略号代替。虽然用动态语言可以对其控制，但是这样做是不利于搜索引擎收录的，而CSS很巧妙地解决了这个问题 网站中经常出现一些标题比较长的文章，再调用标题时为了使整体布局美观，需要将标题控制在一行显示，并且截取一定的长度，截取的地方用省略号代替。虽然用动态语言可以对其控制，但是这样做是不利于搜索引擎收录的，而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;一起使用。*/

64000928

啪啪啪生怕PSP怕

thywok

哦哦哦哦哦哦哦哦哦

4k0mp7m

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴

平平安安

谢谢分享，先下来用用

e8hwl6prw

大家都不容易！

shw5ovr

人都不在了啊 啊

thywok

需要很久了终于找到了

6q8s6p21

搞个免费的用用

dm00ji1s

来看看怎么样