作者:林林净洁_526 | 来源:互联网 | 2020-08-14 01:56
文本溢出始终是一个大问题,尤其是在程序化环境中。总是只有这么多的空间,但可变的内容可以添加到该空间。我最近在一个用于显示用户信息的表上工作,并注意到更长的字符串打破了表格显示。显而易见的解决方案是overflow:hidden为表格单元格添加一个设置,但即使这样,文本看起来也不自然地被切断了。使文本溢出优雅的方法是使用省略号和CSS文本溢出属性。让我们来看看!
文本溢出始终是一个大问题,尤其是在程序化环境中。总是只有这么多的空间,但可变的内容可以添加到该空间。我最近在一个用于显示用户信息的表上工作,并注意到更长的字符串打破了表格显示。显而易见的解决方案是overflow: hidden为表格单元格添加一个设置,但即使这样,文本看起来也不自然地被切断了。使文本溢出优雅的方法是使用省略号和CSS'文本溢出属性。让我们来看看!
CSS
创建省略号后面的CSS非常简单,包括宽度,包装,溢出和文本溢出:
.dataTable td {
/ * essential * /
text-overflow :ellipsis ;
width: 200px ;
white-space: nowrap ;
overflow:hidden ;
/ *外观漂亮* /
padding: 10px;
}
设置宽度提供明显的边界,白色空间阻止正常的下一行换行,隐藏溢出确保宽度维度得到遵守,文本溢出设置提供省略号。太棒了吧?但是有一个问题......
Firefox和省略号
不幸的是,Firefox目前不支持文本溢出:省略号。Dojo Toolkit为Firefox提供了一个简单的解决方案: dojox.html.ellipsis。此资源使用iFrame填充程序来创建省略号。以下是如何使用它:
//需要资源 dojo 。require (“dojox.html.ellipsis” );
在需要Javascript资源之后,是时候dojoxEllipsis在页面中放置一个节点,表明dojox.html.ellipsis资源应该对它进行椭圆化:
Pellentesque居住者morbi tristique senectus et netus et malesuada ... div >
dojoxEllipsis每次修改DOM树时,Dojo都会在页面中搜索具有CSS类的元素并对其进行椭圆化处理。
为内容实现动态省略号是一种简单,微妙且有效的方式,可以在受限制的内容中优雅地管理内容。除了Firefox之外,文本溢出:主要浏览器供应商支持省略号。Dojo的实现是稳定且有效的,但如果页面上有许多椭圆化元素,则会降低页面的速度。快乐的椭圆化!
以上就是使用CSS解决文本溢出的方法的详细内容,更多请关注 第一PHP社区 其它相关文章!
推荐阅读
-
JavaWeb介绍概念JavaWeb,是用Java技术来解决相关web互联网领域的技术总和。web包括:web服务器和web客户端两部分。Java在客户端的应用有javaapplet,不过使 ...
[详细]
蜡笔小新 2023-10-16 00:39:28
-
本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ...
[详细]
蜡笔小新 2023-12-13 20:01:16
-
-
本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ...
[详细]
蜡笔小新 2023-12-14 18:18:21
-
本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ...
[详细]
蜡笔小新 2023-12-14 17:06:58
-
本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ...
[详细]
蜡笔小新 2023-12-14 15:43:50
-
本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ...
[详细]
蜡笔小新 2023-12-14 15:08:18
-
本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ...
[详细]
蜡笔小新 2023-12-13 13:58:25
-
本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ...
[详细]
蜡笔小新 2023-12-13 13:24:33
-
本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ...
[详细]
蜡笔小新 2023-12-13 12:54:29
-
在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ...
[详细]
蜡笔小新 2023-12-13 12:08:09
-
猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ...
[详细]
蜡笔小新 2023-12-13 12:04:03
-
本文讲解了CSS中标签选择器、类名选择器和ID选择器的使用区别,主要包括加空格和不加空格的区别。通过示例代码,说明了加空格表示选择当前节点的后代节点,而不加空格表示一个元素的多个类名不能加空格的规则。 ...
[详细]
蜡笔小新 2023-12-13 09:13:35
-
本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ...
[详细]
蜡笔小新 2023-12-09 03:01:43
-
CSS|网格-行-结束属性原文:https://www.gee ...
[详细]
蜡笔小新 2023-10-17 15:21:56
-
一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ...
[详细]
蜡笔小新 2023-10-17 14:35:15
-