css多行省略号兼容ie,css超出2行部分省略号……，兼容ie

html>

Page Title

.wrap {

height: 40px;

line-height: 20px;

overflow: hidden;

}

.wrap .text {

float: right;

margin-left: -5px;

width: 100%;

word-break: break-all;

}

.wrap::before {

float: left;

width: 5px;

content: ‘‘;

height: 40px;

}

.text {

position: relative;

line-height: 18px;

height: 36px;

overflow: hidden;

}

.text::after {

content:"...";

font-weight:bold;

position:absolute;

bottom:0;

right:0;

padding:0 20px 1px 45px;

/* 为了展示效果更好 */

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);

}

he yellow region as the ellipsis. Then you may think that the pink box takes up space, but will the title be delayed as a whole? Here you can come out by the negative value of margin. Set the negative value of the pale blue box to be the same width as the pink box, and the title can also be displayed normally.

css多行省略号兼容ie,css超出2行部分省略号……，兼容ie相关推荐

css不换行省略号没作用,flex布局下，css设置文本不换行时，省略号不显示的解决办法...
大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度. a name a info Lorem ipsum dolor sit amet, co ...
css--两行显示省略号兼容火狐浏览器
css--两行显示省略号兼容火狐浏览器正常写法: .ellipse1{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} . ...
CSS文本设置超出2行显示省略号
需求如图所示,当居住地址字段太长超过2行时就显示 (-) 1.强制一行so easy <div class="line style">内容部分内容部分内容 </ ...
css设置超出几行显示省略号（单行、多行）,兼容数字英文不换行问题，兼容中文字符隔空换行问题
1.单行文本超长显示省略号 /* css */ p{overflow: hidden;/*超出部分隐藏*/text-overflow:ellipsis;/* 超出部分显示省略号 */white-spa ...
如何设置文本不换行省略号显示等CSS常用文本属性
如何让多余的文本省略号显示首先要说几个属性的作用: whitespace:nowrap 中文行末不断行显示 overflow: 控制超出文本的显示方式:hidden 超出范围文本隐藏:scroll 始 ...
CSS设置超出几行显示省略号
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //行数 /* auto ...
css文本超过多行显示省略号兼容所有浏览器
在网上找到的都是用js判断的(https://www.cnblogs.com/zoumiaomiao/p/4952625.html https://www.cnblogs.com/ChanWunsam ...
文本超出多行显示省略号移动端禁止双击缩放
文本超出两行显示省略号移动端禁止双击缩放单行显示省略号 overflow:hidden; text-overflow:ellipsis; white-space:nowrap 多行省略 displ ...
js文本内容显示6行，超出6行出现显示更多按钮，css样式超出行数只能使用...去替代
js处理文本内容显示6行,超出6行出现显示更多按钮,对于网上说的css样式处理,基本上都是超出6行使用-去处理,不符合需求,先看结果,再看需求:如下先看实现结果,如下图所示: 需求:产品经理提出详情 ...

css多行省略号兼容ie,css超出2行部分省略号……，兼容ie

css多行省略号兼容ie,css超出2行部分省略号……，兼容ie相关推荐

最新文章

热门文章