html限制文字显示行数

90 阅读 0 评论 60 点赞

我是靠谱客的博主甜美红酒，最近开发中收集的这篇文章主要介绍html限制文字显示行数，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

显示容器显示文本行数，并将超出部分用...代替

        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 要显示的行数;
        -webkit-box-orient: vertical;

如果文案是英文字符或数字，可采用white-space 限制

1. word-break:break-all;只对英文起作用，以字母作为换行依据

2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据

3. white-space:pre-wrap; 只对中文起作用，强制换行

4. white-space:nowrap; 强制不换行，都起作用

5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现