css截字符怎么实现？其实很简单

对于纯PC网站来说一般都是后端去节字符的，如果网站是自适应的，那么就需要前端的了，后端只需要输出最大化的字符量就可以了，今天我给大家带来了css节字符功能，目前css节字符对移动端的兼容是最好的，单行节字符最新的浏览器都支持，多行的webkit支持，但是我们对于那些不支持多行的只能是进行优雅降级了，没办法，谁让你不支持的呢。

文本最下方有运行按钮，可以点击看哦。

<!--HTML代码-->
<div class="cgl_cut_text1">一行节字符：给class="cgl_cut_text1"，一行节字符开始了，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
<div class="cgl_cut_text2">二行节字符：给class="cgl_cut_text2"，二行节字符开始了，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
<div class="cgl_cut_text3">三行节字符：给class="cgl_cut_text3"，三行节字符开始了，哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>

<!--CSS代码-->
<style type="text/css">
    *{ margin:0; padding:0; font-style: normal;}
    div{ width:330px; margin:50px auto;}
    .cgl_cut_text1 {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }
    .cgl_cut_text2 {
        line-height:26px;
        overflow: hidden;
        display: -webkit-box;
        height: 52px; /*行高*行数=高度*/
        -webkit-line-clamp: 2; /*截取行数*/
        -webkit-box-orient: vertical;
    }
    .cgl_cut_text3 {
        line-height:26px;
        overflow: hidden;
        display: -webkit-box;
        height: 78px; /*行高*行数=高度*/
        -webkit-line-clamp: 3; /*截取行数*/
        -webkit-box-orient: vertical;
    }
</style>

运行