当文字过长时,我们通常通过三个点来省略掉后面的内容。
文本超出显示三个点一般分两种情况
一,单行文本超出隐藏
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>