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>
  • 相关阅读:
    SQL server多表联合查询
    Linux at命令
    git用法总结详细
    vue插槽
    vue组件通信
    vue高阶函数
    vue过滤器
    vue侦听器watch
    Vue 计算属性 computed
    Spring事务失效的场景
  • 原文地址:https://www.cnblogs.com/xiaodongaini/p/4814738.html
Copyright © 2011-2022 走看看