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>
  • 相关阅读:
    scp命令详解
    linux下不同服务器间数据传输(rcp,scp,rsync,ftp,sftp,lftp,wget,curl)
    详解代理自动配置 PAC
    linux卸载
    VMware里克隆出来的CentOS Linux device eth0 does not seem to be present, delaying initialization
    CentOS系统更换软件安装源yum
    kali开启禁止或删除ssh 开机启动
    7天玩转 ASP.NET MVC
    C#高级编程42章 MVC
    C#高级编程(32章)ADO.net
  • 原文地址:https://www.cnblogs.com/xiaodongaini/p/4814738.html
Copyright © 2011-2022 走看看