CSS单行文本与多行文本超出隐藏

最新推荐文章于 2024-04-20 17:59:05 发布

Jinyon_

最新推荐文章于 2024-04-20 17:59:05 发布

阅读量192

点赞数 1

文章标签： css html 前端 css3

本文链接：https://blog.csdn.net/m0_63447884/article/details/125724452

版权

单行文本

div {
        /* css单行文本超出隐藏 */
        overflow: hidden; /* 超出部分隐藏 */
        white-space: nowrap; /* 规定段落中的文本不进行换行 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        width: 100px; /* 需要配合宽度来使用 */
      }

多行文本

div {
        /* css多行文本超出隐藏 */
        display: -webkit-box;
        overflow: hidden; /* 超出部分隐藏  */
        word-break: break-all; /* 自动换行 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        /* 把块容器中的内容限制为指定的行数。
        它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 
        并且 -webkit-box-orient (en-US) 属性设置成 vertical时才有效果 */
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }