文本超出省略号 - 咖啡没有咖啡豆

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>示例</title>
  <style>
    .single-line {
        padding: 5px;
        background-color: burlywood;
        white-space: nowrap;
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .multi-line {
        padding: 5px;
        margin-top: 20px;
        background-color: darkcyan;
        width: 300px;
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.2em * 3);
    }
  </style>
</head>

<body>
  <div class="single-line">
    单行文本超出省略号，单行文本超出省略号，单行文本超出省略号，单行文本超出省略号，单行文本超出省略号，单行文本超出省略号，
  </div>
  <div class="multi-line">
    多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，多行文本超出省略号，
  </div>
</body>

</html>

代码中，white-space: normal 表示可以换行，display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 3 表示超出部分隐藏并设置最多显示3行，max-height: calc(1.2em * 3) 表示最多显示3行并根据内容自适应高度。这里设置了最多显示3行文本。

注意，-webkit-box-orient 只在 Safari 和 Chrome 上支持，如果需要在其他浏览器上兼容，可以使用 -ms-flexbox 和 display: -webkit-flex。