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>