zoukankan      html  css  js  c++  java
  • 文本溢出显示省略标记'...'的bug

    常用css方法:

    {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

    注意事项:

      1)只适用于块属性元素(或者给行内元素设置display:block;)。

      2)当元素浮动时,不会显示'...',解决方法是给元素设置100%;或者固定的宽度。

      3)火狐中的bug:当用弹性盒模型布局时,布局的子元素设置此方法不起作用。

        解决方法:不用弹性盒模型布局。

        或者采用别的方法来实现'...',如下列方法(margin负值定位法):

        <style type="text/css">
            .outer{width:100%; height:1em; overflow:hidden; }
            .outer .con{float:left; height:1em; margin-right:1em; overflow:hidden;}
            .outer .dotted{height:1em; float:right; margin-top:-1em;}
        </style>
        <body>
            <div class="outer" >
                <div class="con" >调整窗口大小,看看是不是会省略号省略号省略号省略号省略号省略号省略号省略号省略号省略号</div>
                <div class="dotted" ></div>
            </div>
        </body>

    参考:http://www.zhangxinxu.com/study/200909/text-overflow-ellipsis-so-on.html

  • 相关阅读:
    BZOJ 1452 Count(二维树状数组)
    BZOJ 1407 Savage(拓展欧几里得)
    BZOJ 1415 聪聪和可可(期望DP)
    BZOJ 1406 密码箱(数论)
    最大流小结
    UVA6531Go up the ultras
    二分图小结
    Codeforces Round #243 (Div. 1)
    图论模板集合
    zoj3416 Balanced Number
  • 原文地址:https://www.cnblogs.com/duanhuajian/p/3042803.html
Copyright © 2011-2022 走看看