文档章节

有限长度空间内文本长度超出后通过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
博文 77
码字总数 20722
作品 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
395
6
CSS实现单行、多行文本溢出显示省略号(…)

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

ForingY
2015/10/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
44分钟前
1
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
47分钟前
1
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
1
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
今天
1
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部