文本溢出显示省略标记'...'的bug

简介:

常用css方法:

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

注意事项:

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

  2)当元素浮动时,不会显示'...',解决方法是给元素设置width: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

本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/archive/2013/04/25/3042803.html如需转载请自行联系原作者


@挨踢前端

相关文章
|
8月前
|
人工智能 弹性计算 前端开发
如何实现单行/多行文本溢出的省略样式?
如何实现单行/多行文本溢出的省略样式?
|
7月前
|
Java
Java自定义注解:优雅的代码标记
Java自定义注解:优雅的代码标记
53 1
|
7月前
|
Web App开发 前端开发 JavaScript
如何去掉溢出内容的overflow属性滚动条
如何去掉溢出内容的overflow属性滚动条
342 1
|
容器
文本溢出省略号text-overflow: ellipsis显示无效?这一属性到底该怎么用?
文本溢出省略号text-overflow: ellipsis显示无效?这一属性到底该怎么用?
232 0
|
前端开发
CSS:实现文本超出显示省略效果(可指定几行显示)
CSS:实现文本超出显示省略效果(可指定几行显示)
今天来谈谈内容溢出和文字溢出的问题
今天来谈谈内容溢出和文字溢出的问题
如何实现单⾏/多⾏⽂本溢出的省略样式?
如何实现单⾏/多⾏⽂本溢出的省略样式?
css3 text文本超出单行溢出省略和 css3文本超出两行溢出省略
css3 text文本超出单行溢出省略和 css3文本超出两行溢出省略
75 0
|
程序员 测试技术 C++
在 C++ 中标记字符串
标记字符串表示根据某些分隔符拆分字符串。有很多方法可以对字符串进行标记。在这篇文章中解释了其中的四个:
137 0
WORD出错:布局也会超出内容区
WORD出错:布局也会超出内容区
90 0
WORD出错:布局也会超出内容区