IE浏览器 多行文本溢出省略号
时间: 2023-10-25 13:11:46 浏览: 17
在IE浏览器中,可以通过以下样式设置实现多行文本溢出省略号:
```
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 控制显示的行数 */
overflow: hidden;
text-overflow: ellipsis;
```
其中,-webkit-box属性是针对WebKit核心浏览器的属性,用于实现弹性盒子布局。-webkit-box-orient属性设置弹性盒子的主轴方向为垂直方向。-webkit-line-clamp属性用于控制显示的行数,这里设置为2行。overflow属性用于隐藏超出部分,text-overflow属性用于显示省略号。
相关问题
IE浏览器 多行文本溢出显示省略号
在IE浏览器中,可以使用以下CSS样式来实现多行文本溢出显示省略号:
```
-webkit-line-clamp: 2; /* 控制显示的行数 */
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
```
其中,`-webkit-line-clamp`属性用来控制显示的行数,`display: -webkit-box`和`-webkit-box-orient: vertical`属性用来设置文本框为垂直方向的弹性盒子,`overflow: hidden`用来隐藏溢出的文本,`text-overflow: ellipsis`用来显示省略号。
需要注意的是,这种方式只能在WebKit内核的浏览器中生效,如果需要在其他浏览器中实现相同效果,需要使用其他方式来实现。
IE浏览器 js多行文本溢出显示省略号
可以使用CSS的文本溢出属性来实现多行文本溢出显示省略号,如下所示:
```css
/* 设置文本容器的高度和行数 */
.container {
height: 60px;
line-height: 20px;
overflow: hidden;
}
/* 设置文本溢出后显示省略号 */
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
```
在上述代码中,通过设置文本容器的高度和行数来限制文本的显示范围。然后,使用CSS3的flexbox布局属性 -webkit-box ,设置文本框为一个垂直的弹性容器,并且使用 -webkit-line-clamp 属性来限制文本框内的行数,最后使用text-overflow属性来设置文本溢出后显示省略号。