CSS 限制多行文字溢出...

多行文字溢出

代码：

<template>
  <div class="">
    <p>限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多</p>
  </div>
</template>

<style scoped lang="scss">
  p {
    width: 100%;
    word-break: break-all;
    text-overflow: ellipsis; //显示为省略号
    display: -webkit-box; //对象作为伸缩盒子模型显示
    -webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
    -webkit-line-clamp: 3; //显示行数
    overflow: hidden;
  }

显示：

单行文字溢出

代码：

<template>
  <div class="">
    <p>限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出限制多行文字溢出</p>
  </div>
</template>

<style scoped lang="scss">
  p {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>

显示：