zoukankan      html  css  js  c++  java
  • Div里超出部分,省略号显示

    1.一行显示并出现省略号

    1)三个属性:

    1 overflow: hidden;
    2 text-overflow: ellipsis;
    3 white-space: nowrap;
    4 overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号;

    2)网上张大神想出来的margin-top负值的办法:

    <div class="box">
        <div class="wz">文字内容</div>
        <div class="dot">...</div>
    </div>

    CSS:

      

    .box{
        width:设定宽度;
        height:设定高度;
        overflow:hidden;
      }
    .wz{
        float:left;
        height:设定同样的高度;
        margin-right:这里的大小是给省略号留的空间;
      }
    .dot{
        float:right;
        width:刚才留的空间大小;
        height:设定同样的高度;
        margin-top:与高度一样的值的负数;
      }

      这种方法应该是兼容所有的浏览器。

      还有用js或者插件来解决的方法,感觉有点麻烦。

    2.两行显示,第二行出现省略号

    当文字强制两行显示,并且在第二行才出现省略号。解决办法:

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    兼容性不太好,多用于手机端。-webkit-line-clamp: 3;就是表示第几行才显示省略号。

  • 相关阅读:
    MYSQL连接不上100061错误
    最小生成树
    装载问题
    贪心算法-- 纪念品分组
    折腾日记----「乱七八糟的过程」
    LeetCode ---- 474. 一和零「二维01背包」
    Erlang TCP 实例
    Erlang 入门 ---- 基础(一)
    SpringBoot ---- Spring Security
    LeetCode----1026. 节点与其祖先之间的最大差值
  • 原文地址:https://www.cnblogs.com/zjjDaily/p/5956380.html
Copyright © 2011-2022 走看看