处理文本溢出隐藏

文本溢出隐藏的几种情况

一、仅文本溢出隐藏

仅将超出固定宽高的容器的文本隐藏，不做任何处理

html代码块

<div class="box">于千万人之中遇见你所要遇见的人，于千万年之中，时间的无涯的荒野里，没有早一步，也没有晚一步，刚巧赶上了，那也没有别的话可说，惟有轻轻地问一声：“噢，你也在这里吗？”</div>

css代码块

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: palevioletred;
    }
</style>

注意：一定要给容器设置固定宽和高！否则容器会被内容撑开，内容就不会溢出了！

文本溢出效果图

文本溢出.png

• 可以看出容器里面的内容已经超出了容器，我们只需要添加overflow: hidden将超出的内容隐藏即可

css代码块

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: palevioletred;
        overflow: hidden;/*溢出隐藏*/
    }
</style>

隐藏后的效果图

文本隐藏.png

• 可以看出，这种效果只是将超出容器的文本内容隐藏，容器多大，文本就显示多少，这种效果也不好看，并且在实际开发中，这种效果也并不是我们想要的效果。那我们就再看看其他的方法。

二、单行文本溢出隐藏并且显示省略号

如果文字超出容器的固定宽度，文字会自动换行，而连续不间断数字和英文字母不会自动换行。那当我们实际可能只需要文本显示一行，那我们就需要将超出一行的内容隐藏并且显示省略号，就需要设置其他的样式。

css代码块

<style>
    .box {
        width: 400px;
        line-height: 50px;
        background-color: palevioletred;
        white-space: nowrap;/*禁止换行*/
        overflow: hidden;/*溢出部分隐藏*/
        text-overflow: ellipsis;/*文本溢出部分显示省略号*/
    }
</style>

单行文本隐藏显示省略号效果图

单行文本隐藏.png

三、多行本文溢出隐藏并且显示省略号

多行文本溢出隐藏，采用的是自适应布局中的-webkit-box布局。

css代码块

<style>
    .box {
        width: 400px;
        line-height: 50px;
        background-color: palevioletred;
        display: -webkit-box;/*自适应布局——-webkit-box布局*/
        overflow: hidden;/*溢出隐藏*/
        -webkit-box-orient: vertical;/*在父元素设置子元素的排列式——垂直*/
        -webkit-line-clamp: 2;/*显示文本的行数——2行，可根据需要修改*/
    }
</style>

多行文本溢出隐藏效果图

多行文本隐藏.png

就分享到这儿啦，有不正确的地方，欢迎大家指正！还有不同方法的朋友也可以一起讨论噢~