【转】如何用css限制文字长度,使溢出的内容用省略号…显示

文章转自这里(现在貌似被黑了,建议不要点击了)

ps:因在该地方没看到转载按钮,复制下存到这里以待自己方便,别人能看到帮助一下更是乐意之至,效果亲测可以实现,兼容IE、谷歌、火狐

由于文字内容长度的不确定,而网页的布局精确性,如果文字内容超出限定的区域(div,span等),会使页面变形.为了满足页面的布局合理,用css样式自动限制文字长度,使溢出内容用省略号…显示.

限制文字长的css样式如下:

.text_overflow{
width:320px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow:hidden;
}

此样式兼容ie,chrome,safari,opera,firefox6+版本,但是不兼容firefox低版本.
要想兼容低版本的firefox需要加入一个文件:ellipsis.xml,内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<bindings  xmlns="http://www.mozilla.org/xbl"xmlns:xbl="http://www.mozilla.org/xbl"xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><binding id="ellipsis"><content><xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description></content></binding>
</bindings>

之后,css样式修改如下:

.text_overflow{
width:320px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;-moz-binding:url('ellipsis.xml#ellipsis'); overflow:hidden;
}

转载于:https://www.cnblogs.com/daner1257/p/4315527.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/431981.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

yytextview多种格式_iOS YYText的使用笔记一(YYTextView图文编辑器)

YYText是强大的YYKit的一部分可以单独下载Powerful text framework for iOS to display and edit rich text. (Its a component ofYYKit)集成的时候建议使用cocopod管理1.里面主要两个控件&#xff1a;YYTextView 和 YYLabel现在主要是YYTextview的简单使用YYText主要是NSMutab…

React Canvas:高性能渲染 React 组

React Canvas 提供了使用 Canvas 渲染移动 Web App 界面的能力&#xff0c;替代传统的 DOM 渲染&#xff0c;具有更接近 Native App 的使用体验。React Canvas 提供了一组标准的 React 组件&#xff0c;由基于的渲染元素抽象而成。 GitHub 源码下载 示例代码&#xff1a; …

移除集合效率高还是add高_List、set集合接口分析

一、List接口详解1、List接口有三个实现类&#xff0c;ArrayList、LinkedList、Vector2、三个实现类的异同点&#xff1a;&#xff08;1&#xff09;ArrayList: 作为list接口的主要实现类&#xff1b;线程不安全&#xff0c;效率高&#xff1b;底层使用Object[]存储&#xff08…

代码实践

闭包举例&#xff1a; function closure(){var innerVariable inner;function innerFn(){ return innerVariable;}return innerFn(); } var innerVariable defined in outer; var outerVariable closure(); console.log(outerVariable); 测试字符串是否回文&#xff1a; …

python 读取excel太慢_Python 读取excel并转换为字典

方法一&#xff1a;利用利用xlrd读取excel文件其实整个过程比较简单&#xff0c;利用xlrd读取excel文件&#xff0c;再把读取到的数据转换为dict即可。1.安装 xlrdpip install xlrd2.读取文件&#xff0c;并进行格式转换导入的excel表格的格式是这样的&#xff1a;解析后的格式…

windows上编译zlib-1.2.8

MSVC编译 使用VS&#xff08;x86&#xff09;命令行工具进入到zlib根目录&#xff0c;执行 nmake -f win32/Makefile.msc ,在根目录下生成&#xff1a;zlib.lib(静态库) zdll.lib(动态库的导入库) zlib1.dll(动态库) 。必要的头文件有zlib.h和zconf.h 默认生成的是release版的…

大表与大表join数据倾斜_技术分享|大数据技术初探之Spark数据倾斜调优

侯亚南数据技术处支宸啸数据技术处在大数据计算中&#xff0c;我们可能会遇到一个很棘手的问题——数据倾斜&#xff0c;此时spark任务的性能会比预期要差很多&#xff1a;绝大多数task都很快执行完成&#xff0c;但个别task执行极慢或者报OOM(内存溢出)。数据倾斜调优&#xf…

NYOJ 289 苹果(01背包)

苹果 时间限制&#xff1a;3000 ms | 内存限制&#xff1a;65535 KB难度&#xff1a;3描述ctest有n个苹果&#xff0c;要将它放入容量为v的背包。给出第i个苹果的大小和价钱&#xff0c;求出能放入背包的苹果的总价钱最大值。 输入有多组测试数据&#xff0c;每组测试数据第一…

磁盘剩余空间策略_MySQL磁盘消耗迅猛掌握这点就够了,包你事半功倍

Part1:写在最前当一张单表10亿数据量的表放在你面前&#xff0c;你将面临着什么&#xff1f;Part2:背景介绍为了提升数据库资源利用率&#xff0c;一个实例中&#xff0c;在不互相影响&#xff0c;保证业务高效的前提下&#xff0c;我们会将同一个大业务下的不同小业务放在一个…

Date Picker控件:

Date Picker控件&#xff1a; 中文&#xff1a;日期/时间选取器UIDatePicker有一个实例方法setDate:animated&#xff0c;以编程的方式选择日期。UIDatePicker有四种模式&#xff08;model&#xff09;&#xff1a;Time&#xff08;只选时间&#xff09;Date&#xff08;只选日…

logback日志pattern_@Slf4j 实现日志输入到外部文件

添加一个配置文件\src\main\resources\logback-spring.xml<?xml version"1.0" encoding"UTF-8"?><configuration scan"true" scanPeriod"10 seconds"> <contextName>logbackcontextName> <prope…

C++ Prime:sizeof运算符

sizeof运算符的结果部分地依赖于其作用的类型&#xff1a; 对char或者类型为char的表达式执行sizeof运算结果得1&#xff1b; 对引用类型执行sizeof运算得到被引用对象所占空间的大小&#xff1b; 对指针执行sizeof运算得到指针本身所占空间的大小&#xff1b; 对解引用指针执行…

前驱和后驱什么意思_为什么只有豪车才敢用后驱

为什么只有豪车才敢用后驱https://www.zhihu.com/video/1156959599864147968一般的家用车&#xff0c;基本上都是前驱为主&#xff0c;前驱够用&#xff0c;成本还低。但前驱满足不了豪华车的运动需求&#xff0c;所以豪华车后驱才是王道。有人这个时候肯定要跳出来不服了&…

leetcode 第五题 Longest Palindromic Substring (java)

Longest Palindromic Substring Given a string S, find the longest palindromic substring in S. You may assume that the maximum length of S is 1000, and there exists one unique longest palindromic substring. time255ms accepted 暴力遍历 public String longes…

思科光传输功率查询_常见的6款40G QSFP+光模块型号介绍及应用

近些年来&#xff0c;云计算和大数据在我国兴起一股热潮&#xff0c;为了提供足够的带宽&#xff0c;许多接入交换机已经发展到可以连接40G以太网的核心交换机。互连数据传输的快速发展&#xff0c;离不开40G光模块&#xff0c;因为它可以提供足够的带宽&#xff0c;以确保数据…

sigquit信号默认忽略吗_老妹儿,你真的搞懂了 Shell 信号吗?

作者&#xff1a;李振良OK链接&#xff1a;https://blog.51cto.com/lizhenliang/1899347哈喽&#xff0c;各位新来的小伙伴们&#xff0c;大家好&#xff01;由于公众号做了改版&#xff0c;为了保证公众号的资源能准时推送到你手里&#xff0c;大家记得将咱们的公众号 加星标置…

wget 命令用法详解

wget是在Linux下开发的开放源代码的软件&#xff0c;作者是Hrvoje Niksic&#xff0c;后来被移植到包括Windows在内的各个平台上。它有以下功能和特点&#xff1a; &#xff08;1&#xff09;支持断点下传功能&#xff1b;这一点&#xff0c;也是网络蚂蚁和FlashGet当年最大的卖…

datetimepicker不可以选择当天之前_专访吴京:网上《战狼3》的消息我都不知道,大家可以选择不信...

搜狐娱乐讯 (哈麦/文)在2017爆火的《战狼2》之后&#xff0c;吴京演了《祖宗十九代》《流浪地球》《老师好》《银河补习班》《攀登者》《我和我的祖国》《我和我的家乡》《金刚川》八部电影&#xff0c;但是计划中的《战狼3》一直没有动静。不过&#xff0c;关于《战狼3》&…

机器人蛮王_盖伦:吊打我老婆,蛮王:我也是,他:被老婆打的不敢出塔

相遇就是缘分&#xff0c;你点开了我的文章&#xff0c;小编感到万分荣幸&#xff0c;感谢各位朋友。既然看到了我的文章&#xff0c;就说明我们还是有缘&#xff0c;希望大家可以帮我点点左上角的蓝色字体&#xff0c;小编给大家鞠躬了&#xff01;LOL如此好玩的原因&#xff…

栈 详解

官方定义是这样的&#xff1a;栈&#xff08;Stack&#xff09;是一个后进先出的线性表&#xff0c;它要求只在表尾进行删除和插入操作。 栈是一种重要的线性结构&#xff0c;可以这样讲&#xff0c;栈是线性表的一种具体表现形式&#xff0c;但是它在操作上有一些特殊的要求和…