htmlcss溢出文字省略号...显示

最新推荐文章于 2024-07-25 08:14:42 发布

玖商

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量496

点赞数 1

分类专栏： HTML # css3 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_58139900/article/details/120445003

版权

一、单行文本溢出省略号

先强制一行内显示文本；
超出的部分隐藏；
文字用省略号替代超出的部分


/* 1.这个单词的意思是如果文字显示不开也***必须强制一行内显示*** */
     white-space: nowrap;
/* 2.溢出的部分隐藏起来 */
     overflow: hidden;
/* 3. 文字溢出的时候用省略号来显示 */
     text-overflow: ellipsis;

white-space: normal; 这个单词的意思是如果文字显示不开**自动换行**

white-space: nowrap; 这个单词的意思是如果文字显示不开也**必须强制一行内显示**

注意多行溢出最后一行显示时

可以使用br换行符强行换行

二、多行文本溢出显示省略号（了解）

行溢出方法1：拿webkit内核的私有方法实现

-webkit-css属性:属性值;

缺点：只能webkit内核识别！！兼容性差

注意：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

  
     text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
     display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
     -webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
     -webkit-box-orient: vertical;
 overflow: hidden;

伪元素插入

伪元素插入...

优点：兼容性好

缺点：不好看丑

  .many-line-wei::after {
            content: '...';
            position: absolute;
            right: 0;
            bottom: 0;
            padding-left: 10px;
        }

案例

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

最低0.47元/天解锁文章

玖商

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
htmlcss溢出文字省略号...显示

目录一、单行文本溢出省略号注意多行溢出最后一行显示时二、多行文本溢出显示省略号（了解）案例效果图一、单行文本溢出省略号先强制一行内显示文本；超出的部分隐藏；文字用省略号替代超出的部分/* 1.这个单词的意思是如果文字显示不开也***必须强制一行内显示*** */ white-space: nowrap;/* 2.溢出的部分隐藏起来 */ overflow: hidden;/* 3. 文字溢出的时候用省略号来显示 */ ..
复制链接

扫一扫

专栏目录