单行文本
[编辑]demo
.ellipsis1{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } <div class="ellipsis1"> 单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏 单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏单行文字超出隐藏 </div>
[编辑]注意
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。
[编辑
[编辑]多行文本
[编辑]针对某个浏览器的做法
[编辑]chrome
在新版的chrome中有一个属性-webkit-line-camp属性,它允许你指定特定行数省略。
.ellipsis-more-webkit{ width:100%; height: 50px; line-height: 25px; display: -webkit-box; -webkit-line-clamp: 2;/*行数*/ -webkit-box-orient: vertical; /* 方向 */ overflow: hidden; } <div class="ellipsis-more-webkit"> 两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏 且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号,两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号 两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号 </div>
[编辑]opera
在opera浏览器中,也有一个支持属性,即text-overflow:-o-ellipsis-lastline,它能识别超出容器的最后一行作省略。
.ellipsis-more-opera{ width:100%; height: 50px; line-height: 25px; text-overflow:-o-ellipsis-lastline; overflow: hidden; } <div class="ellipsis-more-opera"> 两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏 且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号,两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号 两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号 </div>
[编辑]通用方法
[编辑]纯css,支持IE9+,firefox,chrome等
.ellipsis { overflow: hidden; height: 100px; line-height: 25px; margin: 20px; border: 5px solid #AAA; } .ellipsis:before { content:""; float: left; width: 5px; height: 100px; } .ellipsis > *:first-child { float: right; width: 100%; margin-left: -5px; } .ellipsis:after { content: "\02026"; box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; float: right; position: relative; top: -25px; left: 100%; width: 3em; margin-left: -3em; padding-right: 5px; text-align: right; /*根据背景颜色更改渐变颜色*/ background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white)); background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); } <div class="ellipsis"> <p>I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide, I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide, I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide, I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide, I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide, I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide,I want to hide, I want to hide,</p> </div>
[编辑]css+jquery 主流浏览器都支持
.ellipsis-more{ width: 100%; height: 50px; overflow: hidden; line-height: 25px; } <div class="ellipsis-more"> <p>两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后 我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号,两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏 且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号两行之后我要隐藏且显示省略号</p> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(".ellipsis-more").each(function(i){ var divH = $(this).height(); var $p = $("p", $(this)).eq(0); /**一般是2分法截断,但是考虑到文本里分为三种:中文字、英文字、字符;一般来说,中文字=2英文字=2字符。因此最坏情况可能前面一半字符全部是英文, 后面一半文本全部是中文,这样二分法就会截取到25%的高度,因此考虑到最坏情况,需要3倍才截断**/ while($p.outerHeight()>=divH*3){ $p.text($p.text().substring(0,$p.text().length/2)); } while ($p.outerHeight() > divH) { $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...")); }; }); </script> <pre>
相关推荐
//溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为...
CSS实现不换行/自动换行/文本超出隐藏显示省略号;自动换行,强制不换行,单行文本不换行多余文本显示省略号,第n行显示省略号,亲测有效。
html单元格显示不下的文本用省略号代替,并且鼠标悬停在单元格下面用div显示该单元格的全部文本信息。
本示例中最多显示3行,超出3行后,在第三行末尾用省略号代替显示。 view { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -...
主要介绍了Android实现在TextView文字过长时省略部分或滚动显示的方法,结合实例形式分析了Android中TextView控件文字显示及滚动效果相关操作技巧,需要的朋友可以参考下
文字的多行处理在dom元素中很好办。但是canvas中没有提供方法,只有通过截取指定字符串来达到目的。 那么下面就介绍我自己处理的办法: wxml: ...canvas肯定要一个画板容器啦...//处理文字多出省略号显示 dealWords: fu
如果字数找过特定的字符数,那么超过这个字符数后的文字就显示省略号... 然后出现【展开】或省略号,点击之后就出现全部内容
今天小编就为大家分享一篇解决layui表格内文本超出隐藏的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
title: '交易订单号', align: 'center', key: 'id', minWidth: 120, render: (h, params) => { let texts=params.row.id; //这里的params.row.id 是 key值 if(params.row.id !=null){ if(params
x轴文字显示过长会影响柱状图显示不全,需要对文字进行处理,为了美观,限定文字只显示在一行,文字长度为4;当长度大于4时将第四个文字替换为"...";当鼠标悬浮在"..."时,显示全部内容,其它长度为4的文字正常显示...
这里设置了控制三行,如果超过三行会展示,“显示更多” 超出文字显示省略号。点击“显示更多”会展开所有文案,按钮变成“收起” (未超出三行的时候) (展开) (收起) 代码实现: ...
在div布局中内容溢出了容器,超出了容器所限定的宽度应该...很是疑惑,于是搜集整理一番,发现可以让内容超出容器时超出部分显示省略号,这种做法不仅解决了问题,而且很美观,好了,不多说了,有兴趣的朋友可以参考下
在项目中我们经常需要在文本过长时显示,将文本超出的部分内容用省略号代替: 思想为: 首先设置宽度,然后让超出的部分隐藏 如果有超出则在最后显示省略号 让文本不换行 具体css代码为: 复制代码代码如下:.title{...
x轴文字过长,进行换行处理。 操作流程:复制整个文件的option放如echarts官方容器中即可。
一般的文字截断(适用于内联与块): CSS Code复制内容到剪贴板 .text-overflow { display:block;/*内联对象需加*/ width:25em; .../* 内容超出宽度时隐藏超出部分的内容 */
主要介绍了vuejs数据超出单行显示更多,点击展开剩余数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
一般的文字截断(适用于内联与块): CSS Code复制内容到剪贴板 .text-overflow { display:block;/*内联对象需加 */ width:31em;.../* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellip
越界省略号 复制代码代码如下: .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分...
主要介绍了使用VUE实现在table中文字信息超过5个隐藏,鼠标移到时弹窗显示全部,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
主要介绍了Vue 中文本内容超出规定行数后展开收起的处理的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧