zoukankan      html  css  js  c++  java
  • CSS实现多行文本溢出省略效果和单行文本溢出省略效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <style type="text/css">
    .inaline
    {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
    }
    
    .intwoline
    {
    display:-webkit-box !important;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;
    }
    </style>
    </head>
    <body>
    <div class="inaline" style="200px; height:50px;">
    这里是单行文本溢出的例子这里是单行文本溢出的例子这里是单行文本溢出的例子这里是单行文本溢出的例子这里是单行文本溢出的例子
    </div>
    <div class="intwoline" style="300px;">
    这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子
    这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子
    这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子
    这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子
    这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子
    这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子这里是多行文本溢出的例子
    </div>
    </body>
    </html>
  • 相关阅读:
    jQuery插件编写步骤详解
    原生JavaScript实现JSON合并(递归深度合并)
    js原型链继承及调用父类方法
    codefind.pl
    如何为属性是disabled的表单绑定js事件
    平假名、片假名转换
    #和##在宏替换中的作用
    Perl实用中文处理步骤(修改版)
    Perl Unicode全攻略
    nio DirectByteBuffer如何回收堆外内存
  • 原文地址:https://www.cnblogs.com/xiaodongaini/p/4814738.html
Copyright © 2011-2022 走看看