文档章节

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

呵呵闯
 呵呵闯
发布于 2016/11/29 19:43
字数 192
阅读 18
收藏 0
点赞 0
评论 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
博文 61
码字总数 15895
作品 0
深圳
程序员
CSS实现文字超出长度隐藏,显示省略号

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

lyioris ⋅ 2014/02/20 ⋅ 0

easyui datagrid 单元格内文本超出长度显示省略号

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

荆瑶 ⋅ 2016/10/30 ⋅ 0

C# 中按字节数截取字符串

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

北风其凉 ⋅ 2016/05/23 ⋅ 0

oschina对超长标题加省略号是怎么实现的?

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

FoxHu ⋅ 2012/03/19 ⋅ 6

CSS实现单行、多行文本溢出显示省略号(…)

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

ForingY ⋅ 2015/10/28 ⋅ 0

Web前端 个人笔记(未完待续...)

outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 如:一个text文本框,选中之后(获得焦点)在ie下面是正常显示而在谷歌等浏览器上有一个虚线框,很明...

ForingY ⋅ 2015/07/24 ⋅ 0

CSS实现文字省略号显示

只能实现单行文字省略号显示(css方式),否则只能用js实现或sql语句处理 第一种div方式: CSS设置文字超出范围时显示省略号... 1、创建CLASS .hideNoticeText{ width: 230px; overflow: hi...

Mcho ⋅ 2014/03/03 ⋅ 0

CSS定位布局相关

本文档包括CSS的 样式 定位 框模型 如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。 您可以通过 background-attachment 属性防...

二两豆腐 ⋅ 2015/11/24 ⋅ 0

css防止ul下的li换行(li超出宽度变成…)代码

在使用css结合div布局的时候碰到了一个问题。 在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。 例如宽度为210px的ul里 分别有4个li 这个4个l...

功夫panda ⋅ 2013/01/09 ⋅ 2

CSS 文本截断知多少

文本截断是我们前端经常会碰到的需求,有些文本比较长,设计师往往会在有限的空间内限制字符数量,以确保界面的美观性,而且会在一些字符后面加上省略号来表示截断,这个时候我们往往会使用c...

lucefer ⋅ 2017/07/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

知乎Java数据结构

作者:匿名用户 链接:https://www.zhihu.com/question/35947829/answer/66113038 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 感觉知乎上嘲讽题主简...

颖伙虫 ⋅ 今天 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部