文本溢出省略号和flex在Firefox上不起作用
里克·巴特沃思
我正在使用Polymers flex布局和文本溢出省略号，该省略号可在Chrome和Safari上使用，但不能在Firefox上使用。
的HTML
<footer>
<div>
<div class="layout horizontal center">
<div class="avatar">
<img src="img.jpg" alt="img" />
</div>
<div class="flex">
<a class="layout vertical">
<p class="text-overflow">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<span>12 items<span>
</a>
</div>
<div class="more">
<img src="img.jpg" alt="img" />
</div>
</div>
</div>
</footer>
的CSS
footer {
max-width: 450px;
width: 100%;
overflow: hidden;
}
.layout.horizontal {
display: flex;
display: -webkit-flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
}
.layout.vertical {
display: flex;
display: -webkit-flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
}
.flex {
flex: 1;
-ms-flex: 1;
-webkit-flex: 1;
}
.avatar {
height: 30px;
width: 30px;
background: green;
}
.text-overflow {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.more {
width: 30px;
height: 30px;
background: red;
}
这是我通过Chrome获得的结果：
这是我通过Firefox获得的结果：
马科斯·佩雷斯·古德
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
文字溢出省略号不起作用
- 2
在我的情况下，文本溢出省略号不起作用
- 3
表格单元格上的文本溢出省略号在IE8和IE9中不起作用
- 4
文本溢出：省略号在此元素上不起作用
- 5
如何防止CSS Grid井喷，使文本溢出省略号起作用
- 6
文本溢出：省略号在嵌套的flex容器中不起作用
- 7
css。文本溢出不起作用：省略号
- 8
CSS文字溢出：省略号在V-chip上不起作用
- 9
滚动时文本溢出省略号未在Chrome和IE中显示溢出内容
- 10
文字溢出：省略号；不截断溢出文本并给出省略号
- 11
列表项的文本溢出省略号并保留数字
- 12
具有多个跨度的文本溢出省略号
- 13
文本溢出省略号不受位置影响：相对
- 14
CSS 文本溢出省略号无法正确显示
- 15
为什么我的溢出和文本溢出：省略号代码在 MS Edge 中不起作用？
- 16
在 Chrome 和 Safari 下一行的列表项中使用文本溢出省略号链接
- 17
CSS文本溢出：在Angular 8中使用CSS网格时省略号不起作用
- 18
省略号不起作用
- 19
将文本放置在与第二行文本溢出省略号内联的点后
- 20
文本溢出省略号未以某些自定义字体显示
- 21
在带有文本溢出省略号的行之后放置图标
- 22
宽度100％元素中的文本溢出省略号实现
- 23
Angular Material如何获取复选框文本溢出省略号
- 24
如何使文本溢出省略号3点可点击？
- 25
带有文件扩展名的文本溢出省略号
- 26
文字溢出：省略号在有限的显示行中不起作用
- 27
如何选择我的溢出省略号开始的位置
- 28
CSS文字溢出省略号+以％表示的宽度无效
- 29
文本溢出：省略号和显示表格单元
我来说两句