文本溢出隐藏

最新推荐文章于 2024-06-05 09:45:20 发布

流沙丶

最新推荐文章于 2024-06-05 09:45:20 发布

阅读量1k

点赞数

分类专栏： Web前端疑难点

本文链接：https://blog.csdn.net/qq_40968745/article/details/97137068

版权

Web前端疑难点专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文本溢出隐藏是网页中经常遇见的一种技术非常的普遍，文本溢出隐藏又分为了单行文本溢出隐藏，多行文本溢出隐藏

单行文本溢出隐藏重要属性

white-space:规定了强制文本在一行显示，默认参数nowrap
overflow:文本隐藏必须与overflow连用才能生效
text-overflow:改属性规定了当文本溢出盒子的时候怎么处理文本

代码实例

       div{
           width: 300px;
           height: 100px;
           border: 1px solid #4182FA;
           white-space:nowrap; /*不换行强制文本在一行显示*/
           overflow: hidden; /*超出盒子宽度部分文字被隐藏*/
           text-overflow: ellipsis /*当文本溢出包含元素时发生的事情 ellipsis*/
       }
    </style>
</head>
<body>
   <div>ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
</body>

代码分析：

定义一个div里面包裹了文本，设置了div的宽度，设置了white-sapce属性让文本在一行显示，然后设置overflow:hidden;将溢出的文本给隐藏掉，最后设置了text-overflow属性，该属性规定了当文本溢出后的处理方式ellipsis（显示省略号）

效果展示
在这里插入图片描述

多行文本隐藏显示省略号

多行文本隐藏需要用到的属性

首先将显示模式修改为 display:-webkit-box；弹性盒子
设置盒子内部的排列方式：-webkit-box-orient:vertical；垂直排列
限制块级元素内部文本的显示行数-webkit-line-clamp:2;
overflow:文本隐藏必须与overflow连用才能生效
text-overflow:改属性规定了当文本溢出盒子的时候怎么处理文本

代码实例

<style>
        p{
            display: -webkit-box; /*设置元素显示模式为弹性盒子*/
            -webkit-box-orient: vertical; /*设置弹性盒子内部对象的排列方式为垂直排列*/
            -webkit-line-clamp:2; /*限制块级元素内文本显示的行数*/
            overflow: hidden; /*超出行数的部分隐藏*/
            text-overflow: ellipsis; /*超出了行数显示...*/
        }
    </style>
</head>
<body>
    <p>
        大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊
        大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊大打打打打打打打打打打打打打打打打啊啊啊
    </p>
</body>

效果展示
在这里插入图片描述

上述的多行文本隐藏的方法只适用于谷歌浏览器因为加了-webkit谷歌浏览器的私有前缀，下面分析一种通用的多行文本隐藏的方法

通用的文本隐藏方式

实现原理

给盒子设置高度，让超出高度的文本隐藏
利用伪元素的特性来设置省略号
利用绝对定位脱离文档流的特性来摆放伪元素的位置
设置背景色隐藏掉文字
设置内边距撑开盒子实现效果

代码实例

    <style>
        div{
            height: 45px;
            overflow: hidden;
            position: relative;
        }
        div::after{
            /*利用伪元素添加 省略号*/
            content:"...";
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: #fff;
            padding: 0 11px 0 4px;
        }
    </style>
</head>
<body>

    <div>2004年获我型我秀全国总冠军出道。2007年参加快乐男声；推出EP《最美的太阳》。2008年推出专辑《明天过后》；担任北京奥运会火炬手 [1]  。2010年推出专辑《这，就是爱》；获韩国MAMA亚洲之星奖 [2]  。2012年在人民大会堂开启巡演；作品《风华正茂》获湖南省五个一工程奖 [3]  。2013年首登央视春晚演唱《给我你的爱》；赴美国伯克利音乐学院进修。2014年获第42届全美音乐奖年度国际艺人奖 [4]  。2016年开启张杰我想世界巡回演唱会横跨四大洲七国家25城市，成为首位在欧洲开唱的内地歌手 [5]  。2017年获中国金唱片奖流行类最佳演员奖 [6]  ；拥有个人首尊杜莎夫人蜡像 [7]  。2018年推出MIX-POP曲风专辑《未·LIVE》 [8]  ；开启张杰未·LIVE巡回演唱会，并创鸟巢演唱会票房纪录 [9]  。
已发行12张唱片，举办58场个人演唱会，获33次“最受欢迎男歌手”和19次“最佳男歌手”奖，达成内地乐坛“最受欢迎男歌手”大满贯 [10]  ，三度献唱好莱坞电影 [11-13]  ，四度献唱央视春晚 [14-17]  ，担任博鳌亚洲论坛表演嘉宾，献唱青奥会及全运会开幕式、亚洲文化嘉年华、建军91周年主题曲。</div>
</body>

效果展示
在这里插入图片描述

总结

单行文字溢出隐藏和多行文字溢出隐藏使用的比较多，多行文字溢出隐藏分为了通用的和谷歌私有的，都必须掌握

流沙丶

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
文本溢出隐藏

文本溢出隐藏是网页中经常遇见的一种技术非常的普遍，文本溢出隐藏又分为了单行文本溢出隐藏，多行文本溢出隐藏单行文本溢出隐藏重要属性white-space:规定了强制文本在一行显示，默认参数nowrapoverflow:文本隐藏必须与overflow连用才能生效text-overflow:改属性规定了当文本溢出盒子的时候怎么处理文本代码实例 div{ ...
复制链接

扫一扫