css单行文本溢出显示省略号 css多行文本溢出显示省略号（鼠标悬停显示全部内容）

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>