文档章节

有限长度空间内文本长度超出后通过css实现截取并显示省略号的方法

呵呵闯
 呵呵闯
发布于 2016/11/29 19:43
字数 192
阅读 21
收藏 0

实现方法:

html:
<div class="outer2">
    <div class="outer">
        <span class="inner">朗御2单元29F弱电井F-RRU637677_05</span>
    </div>
</div>
css:
.outer{
    max-width: 100px;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /* 如果超过字段需要显示为... */
}
.inner{
    max-width: 400px;
}

max-width内外元素都要设置,为的是实现元素的溢出效果;

overflow-x: hidden; 溢出

white-space: nowrap; 内容不换行

text-overflow: ellipsis; 超过字段显示省略号

以上三个样式设置是为了实现上图所示的效果,三者必须同时使用。

注意:此方式只是用于一个层级嵌套的元素,如果设置在类outer2,

则不会出现这个效果,注意这个坑。

© 著作权归作者所有

共有 人打赏支持
呵呵闯
粉丝 3
博文 67
码字总数 15949
作品 0
深圳
程序员
CSS实现文字超出长度隐藏,显示省略号

CSS实现文字超出长度隐藏,显示省略号 表格: table{  table-layout: fixed;}td{   white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;} 本方法用于解决表格单元格内...

lyioris
2014/02/20
0
0
easyui datagrid 单元格内文本超出长度显示省略号

easyui datagrid 单元格实现溢出文本显示省略号效果: 方案一:css方案,超出部分省略号 方案二:js方案,鼠标悬停显示全部内容

荆瑶
2016/10/30
36
0
C# 中按字节数截取字符串

在C#语言中,按字符数截取字符串可采用String类的SubString方法实现,但很多情况下,我们需要按字节数截取字符串。 举例来说,现有一行文字,屏幕上需要展示的界面宽度有限,但文字的总长度可...

北风其凉
2016/05/23
190
0
oschina对超长标题加省略号是怎么实现的?

请问oschina对一些超过长度的标题加了省略号...显示,如图 这个是怎么实现的,用的是css,jquery?还是服务器端事先截取好的,谢谢!

FoxHu
2012/03/19
360
6
CSS实现单行、多行文本溢出显示省略号(…)

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。 实现方法: overflow: hidden;text-overflow:ellipsis;white-...

ForingY
2015/10/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

arts-week10

Algorithm 905. Sort Array By Parity - LeetCode Review Who’s Afraid of the Big Bad Preloader? 一文读懂前端缓存 一个网络请求3个步骤:请求,处理,响应,而前端缓存主要在请求处响应这两步...

yysue
今天
4
0
00.编译OpenJDK-8u40的整个过程

前言 历经2天的折腾总算把OpenJDK给编译成功了,要说为啥搞这个,还得从面试说起,最近出去面试经常被问到JVM的相关东西,总感觉自己以前学的太浅薄,所以回来就打算深入学习,目标把《深入理...

凌晨一点
今天
5
0
python: 一些关于元组的碎碎念

初始化元组的时候,尤其是元组里面只有一个元素的时候,会出现一些很蛋疼的情况: def checkContentAndType(obj): print(obj) print(type(obj))if __name__=="__main__": tu...

Oh_really
昨天
6
2
jvm crash分析工具

介绍一款非常好用的jvm crash分析工具,当jvm挂掉时,会产生hs_err_pid.log。里面记录了jvm当时的运行状态以及错误信息,但是内容量比较庞大,不好分析。所以我们要借助工具来帮我们。 Cras...

xpbob
昨天
158
0
Qt编写自定义控件属性设计器

以前做.NET开发中,.NET直接就集成了属性设计器,VS不愧是宇宙第一IDE,你能够想到的都给你封装好了,用起来不要太爽!因为项目需要自从全面转Qt开发已经6年有余,在工业控制领域,有一些应用...

飞扬青云
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部