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>
  • 相关阅读:
    时间选择器组件之table避坑指南
    ⼯⼚模式
    外观模式
    中介者模式+装饰器模式
    代理模式
    策略模式
    设计模式--------单例模式
    设计模式--------订阅/发布模式 (观察者)
    对ts的研究
    对react的研究20200724
  • 原文地址:https://www.cnblogs.com/xiaodongaini/p/4814738.html
Copyright © 2011-2022 走看看