【小技巧】CSS如何实现文字溢出显示省略号

文章目录

• • 文字溢出显示省略号
  • 设置伪类实现全称展示

文字溢出显示省略号

在列表项或者导航菜单中，经常会在列表项或导航菜单中，由于空间有限，当文本内容较长时，可以使用省略号显示文本已被截断。

CSS中文字溢出显示省略号（通常是三个点 "..."）是一种常见的文本截断技术，用于在文本内容超出其容器宽度时，提供一种视觉上的提示，表明文本已被截断。

方法非常简单，只需要添加以下👇三句话就可以实现啦🥳！

1. 设置不允许换行，强制文字一行显示

   white-space:nowrap;
   

2. 设置溢出隐藏

   overflow:hidden;
   

3. 设置文字溢出用省略号代替

   text-overflow:ellipsis;
   

这个方法很多地方都会用到，我们可以直接复制下来，写在一个公共样式当中，下次直接使用类名即可(^o^)/~

.text-overflow{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

设置伪类实现全称展示

当然，文字省略了之后，也要得找个时机让他的文字完全显示的做法，只需要设置一个:hover伪类，让鼠标经过的时候显示全。就像这样👇：

这个就更简单啦！只需要在<a>标签下添加一个title属性就可以了。

<a href="#" title="阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴"> </a>