ul li a{
color: #444444;
width: 288px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: brown;
}
/*该样式代码是错误样例,原因已经写在下文中*/
/* ------------请勿复制错误样例----------------*/
<ul>
<li><a href="#">能用百度搜索找到的答案,就不要轻易麻烦身边的人。</a></li>
<li><a href="#">机会是留给努力奋斗的人的,有谁的幸运,凭空而来? </a></li>
<li><a href="#">喜机会是留给努力奋斗的人的,有谁的幸运,凭空而来?</a></li>
<li><a href="#">能用百度搜索找到的答案,就不要轻易麻烦身边的人。</a></li>
</ul>
溢出文本省略号的属性已经用过好多次,有的案例写在li里,有的案例写在a中,目前还不明白二者的区别,应该是二者都可以使用。
(个人心得:写在li中和a标签中都可以,但是写在a标签中,给a设置大小,可以使得鼠标点击时的范围不仅仅局限于文字上,才能实现跳转页面,而写在li中,鼠标必须点到文本,范围较小。)
在溢出文本省略号设置中,我写到a标签中,但是这次写的时候没有实现,排查了一圈,发现是a标签不是块状元素,本身并不能设置宽高,需要用浮动属性float或者display:block;将a标签转换为块元素,再为其设置宽度。
ul li a{
float:left; /*更改元素类型,也可以使用display:block;复制使用时,请注意中英文符号*/
color: #444444;
width: 288px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: brown;
}
单行文本溢出裁剪显示省略号四个步骤缺一不可:
- 为容器设置宽度width: value;(px,%均可)
- 强制文本在一行内显示:white-space:nowrap;
- 溢出文本隐藏:overflow:hidden;
- 溢出文本显示省略号:text-overflow:ellipsis;
单独设置溢出显示省略号的属性时,并不具备其它样式的时候,是不能实现文本溢出显示省略号的效果的。
另外需要注意的是,li中单行文本最好设置高度,在li>a标签中设置浮动,很容易出现高度塌陷。
2021年6月21日更-------------------------------------------------------------------------------------
css样式表的第一段代码是错误样例的,下面有解释文案,因为样式是写给内联元素a的,所以需要给a更改元素类型。
另外请注意本篇文章是实现单行文本省略号的,如果没有实现效果,请检查代码中截取的width宽度值、a标签的元素类型是不是没有改、中英文符号的切换、代码样式是否复制成错误样例等等。
如仍有问题,欢迎大家私聊探讨。