文本溢出显示省略标记'...'的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如需转载请自行联系原作者


@挨踢前端

相关文章
|
分布式计算 Hadoop 大数据
大数据技术与Python:结合Spark和Hadoop进行分布式计算
【4月更文挑战第12天】本文介绍了大数据技术及其4V特性,阐述了Hadoop和Spark在大数据处理中的作用。Hadoop提供分布式文件系统和MapReduce,Spark则为内存计算提供快速处理能力。通过Python结合Spark和Hadoop,可在分布式环境中进行数据处理和分析。文章详细讲解了如何配置Python环境、安装Spark和Hadoop,以及使用Python编写和提交代码到集群进行计算。掌握这些技能有助于应对大数据挑战。
967 1
|
自然语言处理 搜索推荐 API
通义千问API:用4行代码对话大模型
本章将通过一个简单的例子,让你快速进入到通义千问大模型应用开发的世界。
通义千问API:用4行代码对话大模型
|
数据采集 人工智能 数据处理
Python自动化办公:提升效率,释放潜力(借助AI实现)
Python自动化办公:提升效率,释放潜力(借助AI实现)
1248 0
|
开发工具
vim编辑器常用命令
vim编辑器常用命令
344 1
|
算法 C++
C/C++基础知识——字符串(三)
C/C++基础知识——字符串
434 0
|
人工智能 自然语言处理 搜索推荐
阿里云推出企业级大模型RAG系统,几次点击即可连接PB级知识库
阿里云推出企业级大模型RAG系统,几次点击即可连接PB级知识库
2009 1
|
设计模式 Java 测试技术
Spring依赖注入的魔法:深入DI的实现原理【beans 五】
Spring依赖注入的魔法:深入DI的实现原理【beans 五】
807 0
|
存储 API Python
Deforum 插件并未集成在 Stable Diffusion Web UI 中
Deforum 插件并未集成在 Stable Diffusion Web UI 中
865 1
|
缓存 边缘计算 安全
云计算 - 内容分发网络CDN技术与应用全解
云计算 - 内容分发网络CDN技术与应用全解
1645 0
|
域名解析 存储 缓存
服务发现与配置管理高可用最佳实践|学习笔记(一)
快速学习服务发现与配置管理高可用最佳实践
服务发现与配置管理高可用最佳实践|学习笔记(一)