文本截断

A paragraph of filler text. La la la de dah de dah de dah de la.

A paragraph of filler text. La la la de dah de dah de dah de la la la de dah de dah de dah de lala la de dah de dah de dah de lala la de dah de dah de dah de lala la de dah de dah de dah de lala la de dah de dah de dah de lala la de dah de dah de dah de lala la de dah de dah de dah de la.

<style>
  .main-text-truncate {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .main-text-truncate p {
    width: 329px;
    text-align: justify;
    hyphens: auto;
    overflow: hidden;
    line-height: 1.5em;
  }
  .main-text-truncate p:nth-of-type(1) {
    white-space: nowrap;
    word-wrap: normal;
    text-overflow: ellipsis;
  }
  .main-text-truncate p:nth-of-type(2) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>
<template>
  <div class="main-text-truncate">
    <p>A paragraph of filler text. La la la de dah de dah de dah de la.</p>
    <p>A paragraph of filler text. La la la de dah de dah de dah de la la la de dah de dah de dah de lala la de dah de dah de dah de lala la de dah de dah de dah de lala la de dah de dah de dah de lala la de dah de dah de dah de lala la de dah de dah de dah de lala la de dah de dah de dah de la.</p>
  </div>
</template>

显示代码 复制代码 复制代码