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

  • 相关阅读:
    HDFS文件操作(基本文件命令)
    <a> 标签
    css text-overflow
    zepto.js 打包自定义模块
    CSS3 box-sizing
    CSS3 Filter
    JQ 导出 Excel
    outline css2
    iphone 操作手势种类
    动手写一个简单的Web框架(模板渲染)
  • 原文地址:https://www.cnblogs.com/duanhuajian/p/3042803.html
Copyright © 2011-2022 走看看