您现在的位置是：网站首页> 编程资料编程资料
利用CSS截取标题长度方法_CSS教程_CSS_网页制作_
2021-09-08
964人已围观
简介 网站中经常出现一些标题比较长的文章，再调用标题时为了使整体布局美观，需要将标题控制在一行显示，并且截取一定的长度，截取的地方用省略号代替。虽然用动态语言可以对其控制，但是这样做是不利于搜索引擎收录的，而CSS很巧妙地解决了这个问题
网站中经常出现一些标题比较长的文章，再调用标题时为了使整体布局美观，需要将标题控制在一行显示，并且截取一定的长度，截取的地方用省略号代替。虽然用动态语言可以对其控制，但是这样做是不利于搜索引擎收录的，而CSS很巧妙地解决了这个问题，请看下面的代码：
代码一：用于非表格LI或span等都可以
代码二：用于表格
代码一：用于非表格LI或span等都可以
复制代码
代码如下:.text-overflow {
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
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;一起使用。*/
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */ td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
相关内容
- css中url的路径含义及使用_CSS教程_CSS_网页制作_
- css hack问题_浏览器兼容教程_CSS_网页制作_
- 小标签大作用 CSS中zoom:1的使用方法_CSS教程_CSS_网页制作_
- 使用CSS清除按钮和超链接点击时产生的虚线 _CSS教程_CSS_网页制作_
- DIV+CSS实例虚线边框|CSS虚线下划线及虚线用应_CSS_网页制作_
- 有关于a标签的4个伪类的使用方法_CSS教程_CSS_网页制作_
- 引用css文件失效解决方法_CSS教程_CSS_网页制作_
- CSS包含中文的问题说明_CSS教程_CSS_网页制作_
- IE兼容css3圆角的实现代码_css3_CSS_网页制作_
- CSS 鼠标选中文字后改变背景色的实现代码_CSS教程_CSS_网页制作_
