前端技巧文本超出宽度后隐藏并显示省略号的方法

文本超出宽度后隐藏并显示省略号的方法

文本超出宽度自动隐藏,常用于标题列表,一般实现文本超出宽度隐藏需要同时设置3个属性,分别是强制文本不换行,超出部分隐藏以及超出部分显示省略号,例如下面是一个标题列表:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
body {line-height:2;}
ol,li {margin:0;padding:0;}
li {width:330px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
</style>
</head>
<body>
<div id="box">
<h3>点击排行榜</h3>
<ol>
<li>腾讯云第三代云服务器,更大数据处理宽度,浮点运算能力</li>
<li>全球首批银色 iPhone X 开箱视频、图集欣赏</li>
<li>腾讯将金庸15部小说改编成漫画:令狐冲、东方不败大变样</li>
<li>给地球降温 科学家设想用二氧化硫气体遮蔽太阳光</li>
</ol>
</div>
</body>
</html>

这里将列表标题的宽度设置为330px,并设置了刚才所说的三个CSS定义,所以当标题文字超过宽度时会自动显示省略号:

文本超出宽度显示省略号.png

上面的例子中,并没有在CSS里隐藏列表项前面的符号,但本例中有序列表并没有显示前面的数字,原因是当设置了overflow:hidden后,列表前面的符号被自动隐藏了,如果需要加上列表符号,还需要增加下面的定义:

li {list-style-position:inside;}

增加了这个定义后,本例的显示效果如下图:

文本超出宽度显示省略号2.png

列表标记属性list-style-position的默认值为“outside”,列表标记放置在文本以外,且环绕文本不根据标记对齐。

而如果列表标记属性list-style-position设置为“inside”,则表示列表项目标记放置在文本以内,且环绕文本根据标记对齐。

如果是在一个表格单元格内需要这种效果,则可以用到下面这个定义:

table {table-layout:fixed;}

这个定义的作用是让表格布局固定,表格的宽度不随单元格内容来计算尺寸。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/129.html