css控制文本内容超出部分显示...

最新推荐文章于 2024-09-19 08:00:00 发布

夜的一路向北

最新推荐文章于 2024-09-19 08:00:00 发布

阅读量4.5k

点赞数

分类专栏： html、css 文章标签： html

本文链接：https://blog.csdn.net/qq_43182556/article/details/90514918

版权

html、css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

有时我们在做页面时会遇到这种情况，文本内容过长，造成页面布局不好看，那么这里就来get一个新技能吧，

当我们想要内容在一行显示部分，其余内容显示...的时候，我们只需要对其标签的style样式设置一下css

         width: 80px;
         overflow: hidden;
         text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        -moz-text-overflow: ellipsis;
        white-space: nowrap;  /*规定段落中的文本不进行换行

当我们想要内容多行显示时，又会因为太多行而烦恼，那么我们可以这样设置

width: 100px;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box; 
        -webkit-line-clamp: 3; /* 可以显示的行数，超出部分用...表示*/
        -webkit-box-orient: vertical;

好啦，以上就是怎么让多余的内容进行...显示的，其中可以根据width宽度来控制显示内容的多少