文本溢出显示省略号，鼠标浮动查看全部内容

目录

1、文本溢出显示省略号

2、鼠标浮动查看全部内容

---

1、文本溢出显示省略号

今天做项目时遇到一种需求：文本溢出截断省略，上网查阅了一下，还是挺简单的，但是考虑到自己疑似老年痴呆的大脑，就在这里整理一下，以备以后碰到这种同样的需求。如果是单行溢出显示省略可以使用如下代码：

div {  
  white-space:nowrap;  /* 设置文字在一行显示，不能换行 */  
  overflow: hidden;    /* 文字长度超出限定宽度，则隐藏超出的内容 */
  text-overflow: ellipsis;/* 规定当文本溢出时，显示省略符号来代表被修剪的文本 */
}

上述的三行代码所有浏览器基本上都支持，而且可以做到响应式截断，文本溢出范围才显示省略号，否则不显示省略号。

但有时候还需要考虑显示的行数，如：超出两行或三行才考虑内容溢出省略，就可以使用如下代码：

div {      
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;     /* 将对象作为弹性伸缩盒子模型显示 */      
  -webkit-line-clamp: 2;    /* 控制最多显示几行 */      
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */    
}

2、鼠标浮动查看全部内容

有隐藏就要有显示，不然谁知道省略的那部分文本具体内容是什么，我们可以通过 title 属性显示所有文本内容：

<!--如果title的内容是字面量，直接写就好了-->
<p class="ellipse" title="这里填写字符串内容">{{this.message}}</p>

<!--如果title的内容是变量，则需要通过v-bind绑定-->
<p class="ellipse" :title="通过v-bind:title绑定">{{this.message}}</p>