css单行文本溢出显示省略号 css多行文本溢出显示省略号(鼠标悬停显示全部内容)
<template>
<div>
<h2>单行文本溢出</h2>
<div class="box1">
<ul>
<li title="全部内容展示:文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1">
文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1
</li>
</ul>
</div>
<h2>多行文本溢出</h2>
<div class="box2">
<ul>
<li title="全部内容展示: 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2">
文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2 文本内容2
</li>
</ul>
</div>
</div>
</template>
<script>
export default {};
</script>
<style>
.box1 ul {
width: 200px;
}
.box1 ul li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.box2 ul {
width: 200px;
}
.box2 ul li {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
</style>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210529124223831.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzE0NDQxNw==,size_16,color_FFFFFF,t_70)