[前端] 实现单行文本溢出和多行文本溢出省略

项目中经常会用的标题或摘要超出省略的功能，从网找了一些参照，在这里写一下，希望对你有帮助。。。

一、单行文本溢出省略

CSS样式：

<style>
    .box {
        width: 120px;
        height: 100px;
        background: green;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>

知识点：

1、white-space: nowrap  文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

HTML布局：

<div class="box">
    <a href="javascript:;">天涯何处无芳草，TMD就是找一到</a>
</div>

效果：

二、多行文本溢出省略

CSS样式：

<style>
    .box {
        display: -webkit-box;
        width: 120px;
        height: 100px;
        background: green;

        text-overflow: ellipsis;
        word-break: break-all;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; 

        overflow: hidden;
    }
</style>

知识点：

1、word-break：break-all  允许在单词内换行

2、box-orient：vertical  子元素垂直排列

3、-webkit-line-clamp：指定到多少行出现省略号

HTML布局：

<div class="box">天涯何处无芳草，TMD就是找不到天涯何处无芳草，TMD就是找不到天涯何处无芳草，TMD就是找不到 </div>

效果：

谢谢关注~