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>
