文章目录
- 文字溢出显示省略号
- 设置伪类实现全称展示
文字溢出显示省略号
在列表项或者导航菜单中，经常会在列表项或导航菜单中，由于空间有限，当文本内容较长时，可以使用省略号显示文本已被截断。
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>
