利用CSS截取标题长度方法

建站知识 2021-07-03 08:43www.168986.cn长沙网站建设

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

代码一用于非表格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，狼蚁网站SEO优化td的定义才能起作用。 / td{
width:100%;
word-break:keep-all;/ 不换行 /
white-space:nowrap;/ 不换行 /
overflow:hidden;/ 内容超出宽度时隐藏超出部分的内容 /
text-overflow:ellipsis;/ 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。/

上一篇：你正在寻找的CSS3 动画技术下一篇：css中url的路径含义及使用

利用CSS截取标题长度方法

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

利用CSS截取标题长度方法

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设