CSS实现单行与多行文字截断 

<style>
  main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  p {
    width: 329px;
    text-align: justify;
    hyphens: auto;
    overflow: hidden;
    line-height: 1.5em;
  }
  p:nth-of-type(1) {
    white-space: nowrap;
    word-wrap: normal;
    text-overflow: ellipsis;
  }
  p:nth-of-type(2) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>

<body>
 <main>
    <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>
  </main>
</body>

效果：
image

posted @ 2022-08-16 17:15  SuanYunyan  阅读(166)  评论(0)    收藏  举报