1. <div>
    2. 白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
    3. </div>
    1. div {
    2. width: 200px;
    3. background-color: #fff;
    4. padding: 15px;
    5. white-space: nowrap;
    6. overflow: hidden;
    7. text-overflow: ellipsis;
    8. }

    还可以使用“-webkit-line-clamp”属性将文本截断为特定的行数。文本将在截断的地方会显示省略号

    1. div {
    2. width: 200px;
    3. display: -webkit-box;
    4. -webkit-box-orient: vertical;
    5. -webkit-line-clamp: 2;
    6. overflow: hidden;
    7. }