文章目录
文字溢出显示省略号
在列表项或者导航菜单中,经常会在列表项或导航菜单中,由于空间有限,当文本内容较长时,可以使用省略号显示文本已被截断。
CSS中文字溢出显示省略号(通常是三个点 "...")是一种常见的文本截断技术,用于在文本内容超出其容器宽度时,提供一种视觉上的提示,表明文本已被截断。
方法非常简单,只需要添加以下👇三句话就可以实现啦🥳!
-
设置不允许换行,强制文字一行显示
white-space:nowrap;
-
设置溢出隐藏
overflow:hidden;
-
设置文字溢出用省略号代替
text-overflow:ellipsis;
这个方法很多地方都会用到,我们可以直接复制下来,写在一个公共样式当中,下次直接使用类名即可(^o^)/~
.text-overflow{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
设置伪类实现全称展示
当然,文字省略了之后,也要得找个时机让他的文字完全显示的做法,只需要设置一个:hover
伪类,让鼠标经过的时候显示全。就像这样👇:
这个就更简单啦!只需要在<a>
标签下添加一个title
属性就可以了。
<a href="#" title="阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴"> </a>