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

浏览: 428次 日期:2017年12月15日 20:39:02 作者:青格勒

对于纯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>

文章链接:http://cenggel.com/htmlcss/22.html

版权声明:文章《css截字符怎么实现?其实很简单》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注