截断文本问题
单行文本截断
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
多行文本截断
ADDING MULTIPLE LINE ELLIPSIS EFFECT WITH CSS
在 flexbox 中截断文本的问题
blablablablablablablablabla...blablablablablablablabla
blablablablablablablablabla...blablablablablablablabla
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
我们期望的效果是两个文本在同一行各占百分之五十,溢出的文本被 ...截断,但实际的效果是两段文字都在同一排完整的显示出来了。(Safari不会出现这种问题)
解决方案是对 .fc 设置 width(或 max-width 或 min-width) 或 overflow 属性
加上
.fc {
width: 50%;
}
或者
.fc {
overflow: hidden;
}
之后可得到我们想要的效果
原因
According to a draft spec, the above text should not fully collapse when the flex container is resized down. Because .subtitle has a width of 100%, the min-width: auto calculation that flexbox makes says that its container should be larger than we want.
大概是 chrome、opera 以及 firefox 的默认宽度属性的问题。
参考 :
Flexbox and Truncated Text
关键字:截断, 文本, flexbox, overflow
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!