css结合element超出文字显示三个点

最新推荐文章于 2024-06-07 11:15:24 发布

Change!!

最新推荐文章于 2024-06-07 11:15:24 发布

阅读量4.4k

点赞数 3

分类专栏： element 文章标签： css elementui 超出隐藏

本文链接：https://blog.youkuaiyun.com/weixin_46172085/article/details/121995338

版权

element 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了在网页设计中如何使用CSS实现单行和多行文本超出隐藏，并展示完整内容的方法。通过结合overflow、text-overflow、white-space等属性可以实现文本省略，同时利用Tooltip组件，可以在鼠标悬停时显示全部文本，提供良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当文字过长时，我们通常通过三个点来省略掉后面的内容。

文本超出显示三个点一般分两种情况
一,单行文本超出隐藏

  overflow:hidden;
　text-overflow:ellipsis;
　white-space:nowrap;

二,多行文本超出隐藏
超过设置的宽后显示三个点。

　word-break: break-all;
  overflow:hidden; 
  text-overflow:ellipsis; 
  display:-webkit-box;
  -webkit-box-orient:vertical;  
  -webkit-line-clamp:3; /* 超出几行省略 */

三.那我既想超出文本后隐藏，又想看到完整的文本内容呢？
答案：通过上面的超出隐藏代码和element中Tooltip功能的结合使用即可，代码如下：

//鼠标移动到el-tooltip即可显示完整的文本。
 <el-tooltip class="item" effect="dark" :content="MSG" placement="top" >
   <a  class="msg" > {{MSG}}</a> 
 </el-tooltip>