text-overflow | 易学教程

text-overflow ellipsis 自动截断超出范围的文本

阅读更多关于 text-overflow ellipsis 自动截断超出范围的文本

今天前端同事问了一个小技巧的问题，怎么控制超出范围的文本自动截断，给她写完后来普渡下众生`(*∩_∩*)′ 1、普通的文本段对于普通的文本段的话只需要定义下面三个属性 p { white-space: nowrap; /* 使内容不自动换行对应的还有 normal 自动换行 */ overflow: hidden; /* 超出容器范围的内容隐藏 */ text-overflow: ellipsis; /* 文本超出容器范围以 ... 做截断 */ } <p>hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world </p> 2、表格的文本段当在表格中想要实现此效果时需要将此表格的 table-layout 设为 fixed table { width: 100%; table-layout: fixed; /* 一定要有此属性 */ } td { white-space: normal; overflow: hidden; text-overflow: ellipsis; } 其他与普通文本段的定义没区别来源： oschina 链接： https://my.oschina.net/u

关于CSS

阅读更多关于关于CSS

关于CSS overflow超出的情况，常用hidden overflow-x(y) 如果加了高度要让它自适应高度 text-overflow:auto; 还有可以加min-height最小高度还有过了边界自动加...（IE） text-overflow:ellipsis 通用的 .ellipsis { text-overflow: ellipsis; -moz-binding: url('ellipsis.xml#ellipsis'); <?xml version="1.0"?> <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> 一个IE和FireFox的高度处理 .LeaveWordContent {

text-overflow 文字溢出时的设置

阅读更多关于 text-overflow 文字溢出时的设置

text-overflow ： clip | ellipsis clip：不显示省略标记（...），而是简单的裁切。 ellipsis：当对象内文本溢出时显示省略标记（...）设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。 text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>text-overflow</title> </head> <body> <style type="text/css"> .test_demo

CSS超过部分显示省略号。只显示一行，超出用点表示。显示两行，超出用点表示

阅读更多关于 CSS超过部分显示省略号。只显示一行，超出用点表示。显示两行，超出用点表示

单行文本超过部分显示省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行文本超过部分显示省略号 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; 来源： CSDN 作者： RosaChampagne 链接： https://blog.csdn.net/RosaChampagne/article/details/104631225

单行省略 / 多行省略

阅读更多关于单行省略 / 多行省略

多行省略 { display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; white-space: normal;} 2.单行省略 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 来源： CSDN 作者： Sword_meaning 链接： https://blog.csdn.net/Sword_meaning/article/details/104542657

文字超出容器长度自动隐藏并且显示省略号

阅读更多关于文字超出容器长度自动隐藏并且显示省略号

在做网站的过程中我们会遇到这样一种情况，在新闻列表中一行只显示一条新闻，但是新闻标题的长短是不一样的，如果新闻标题过长会自动换行，当然可以使用溢出隐藏属性，但是使用溢出隐藏又会显得比较突兀，现在给大家提供以下解决方法 <style> p { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} </style> 只需要在原先写好的样式中加入上述代码即可来源： 51CTO 作者：日晚间粉链接： https://blog.51cto.com/12765394/2161404

div溢出处理css

阅读更多关于 div溢出处理css

单行 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 多行 overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp:2;（行数，不用设置div高度） -webkit-box-orient: vertical; 来源： CSDN 作者：艺外天羯链接： https://blog.csdn.net/u012842714/article/details/103715225

文本超出点点点

阅读更多关于文本超出点点点

width: 400rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 设定宽度不换行超出隐藏超出点点点 text-overflow: clip|ellipsis|string; 值描述 clip 修剪文本。 ellipsis 显示省略符号来代表被修剪的文本。 string 使用给定的字符串来代表被修剪的文本。来源： https://www.cnblogs.com/jiqing9006/p/12199975.html

截取长文本，显示省略号（text-overflow:ellipsis）

阅读更多关于截取长文本，显示省略号（text-overflow:ellipsis）

今天做项目有这么个需求（截取过长的文本内容，显示成省略号形式）于是想到了text-overflow：ellipsis，但记忆中好像这个有兼容性问题，就带着疑惑查阅了些资料，但发现资料都是一两年前的，都说有兼容性问题，貌似符合当年的记忆。心想不好，难道又要依靠js吗，这多多少少会损耗掉一些性能啊，带着疑虑和不甘自己来验证一番，毕竟过了几年了，这个css3的属性难道现代浏览器还不全支持吗？万恶的ie都一直支持的，这太不符合规律了。于是经过一系列验证，我得出text-overflow：ellipsis如今各大浏览器已完美支持（如有错误还请指出）截取过长的文本内容，显示成省略号需要 text-overflow：ellipsis 加上一系列其他属性才能实现，下面分情况来说明： 1.div p li等块元素中如果全是数字则只需要 text-overflow：ellipsis 配上width和overflow：hidden就能实现... example: <div style=" width:50px; text-overflow:ellipsis; overflow:hidden;">1111111111111111111111111111111111</div> 2.div p li等块元素中如果全是英文则只需要 text-overflow：ellipsis

css单行文本溢出和多行文本溢出显示省略号

阅读更多关于 css单行文本溢出和多行文本溢出显示省略号

1.单行文本溢出显示省略号 @mixin no-wrap() { 　　overflow: hidden; 　　-ms-text-overflow: ellipsis; 　　text-overflow: ellipsis; 　　white-space: nowrap; } 2.多行文本溢出显示省略号 @mixin no-wrap-multi($linNum) { 　　display: -webkit-box; 　　-webkit-box-orient: vertical; 　　-webkit-line-clamp: $linNum; 　　overflow: hidden; 　　text-overflow: ellipsis; } 来源： https://www.cnblogs.com/zhanyoulin/p/11076975.html