兼容ie的文字超出显示省略号

单行文本的溢出显示省略号： (需要加宽度width兼容部分浏览器)

overflow: hidden;    //  超出隐藏
text-overflow:ellipsis; // 显示省略符号来代表被修剪的文本。
white-space: nowrap; // 强制文字一行显示

属性：text-overflow:ellipsis;

text-overflow：取值clip | ellipsis | string;

 text-overflow 属性规定当文本溢出包含元素时发生的事情。默认值clip，不会继承
clip：修剪文本。仅超出隐藏。
ellipsis：显示省略符号来代表被修剪的文本。超出隐藏显示省略号。
string：用给定的字符串替换被修剪的文本。

多行文本显示省略号：（只适用webkit内核的浏览器及移动端）

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;//  超出隐藏

属性：text-overflow:ellipsis

display: -webkit-box;

css3新添加的盒子模型属性,属性规定父盒子的子元素是否可伸缩其尺寸，text-overflow 属性规定当文本溢出包含元素时发生的事情。默认值clip，不会继承
属性值：box-flex 属性:目前没有浏览器支持，作为代替Firefox 支持替代的 -moz-box-flex 属性。Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。IE 不支持 box-flex 属性。

-webkit-box-orient: vertical;

水平方向从左到右，垂直方向从上到下，box-direction和box-ordinal-group 能够改变这种顺序。
这个就跟flex布局的排列概念很相似了。box-flex 属性:目前没有浏览器支持，作为代替Firefox 支持替代的 -moz-box-orient 属性。Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient  属性。IE 不支持 box-flex 属性。取值：
horizontal：在水平行中从左向右排列子元素。
vertical：从上向下垂直排列子元素。
inline-axis：沿着行内轴来排列子元素（映射为 horizontal）。。
block-axis：沿着块轴来排列子元素（映射为 vertical）。
inherit：从父元素继承 box-orient 属性的值。

-webkit-line-clamp: 3;限制在一个块元素显示的文本的行数。（仅webkit内核的浏览器及移动端支持）；

适配各种浏览器的多行兼容：

div {   // 超出两行显示省略号position: relative;line-height: 24px;max-height:48px;overflow: hidden;
}
div::after {content: "...";position: absolute;bottom: 0;right: 8px;padding-left: 30px;background: -webkit-linear-gradient(left, transparent, #fff 50%);background: -o-linear-gradient(right, transparent, #fff 50%);background: -moz-linear-gradient(right, transparent, #fff 50%);background: linear-gradient(to right, transparent, #fff 50%);
}

注意：

原理是将超出的部分隐藏，再使用伪元素的背景渐变效果遮住最后显示的文字以呈现省略号的效果。
IE6-7不显示content内容，要添加标签包裹…（如：…）；
- ie8需要将::after替换成:after。
- 高度最好是行高的整倍数，避免文字显示不全

兼容ie的文字超出显示省略号相关推荐

css实现文字超出显示省略号...
01.块状元素单行文本超出显示省略号: ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ove ...
【CSS】css文字超出显示省略号/文字超过三行显示省略号..
单行 .p1{/*单行*/white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} 多行 .p2{/*多行*/overflow: hidd ...
css 文字超出显示省略号
css 文字超出显示省略号 <html> <style type="text/css">div{width: 100px;overflow: hidden; ...
canvas 文字超出显示省略号
项目实例,点击可查看以uni-app框架为例:可以把画图封装成一个函数调用. activityCanvas: function(arrImages, storeName, price, people ...
多行文字超出显示省略号
多行文字超出显示省略号... display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; //设置为超出三行后 ...
在td标签中文字超出显示省略号，鼠标悬停显示所有文本
在td标签中文字超出显示省略号,鼠标悬停显示所有文本首先得在table的style中加入table-layout:fixed,让表格固定,然后用width设定表格的宽度. 然后表格中所有的列都一样宽 ...
文字超出显示省略号解决方案
文字单行超出显示省略号 div {width: 200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; } 文字多行超出 ...
html怎么多行超出省略号,css+js 如何实现多行文字超出显示省略号（需要同时兼容ie chrome等浏览器）...
chrome浏览器下 ie11浏览器下 html ` ` css ` .trainInfo_text { position: relative; margin: 10px 0 10px 10px; w ...
微信小程序文字超出显示省略号
如果容器有固定的宽度,加入以下代码即可. view {overflow: hidden;text-overflow: ellipsis;white-space: nowrap; } 如若容器不需要有固 ...

兼容ie的文字超出显示省略号

兼容ie的文字超出显示省略号

单行文本的溢出显示省略号： (需要加宽度width兼容部分浏览器)

text-overflow：取值clip | ellipsis | string;

多行文本显示省略号：（只适用webkit内核的浏览器及移动端）

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;限制在一个块元素显示的文本的行数。（仅webkit内核的浏览器及移动端支持）；

适配各种浏览器的多行兼容：

注意：

兼容ie的文字超出显示省略号相关推荐

最新文章

热门文章