截断文本问题

单行文本截断

p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

多行文本截断

对于固定行高的文本框，我们可以使用纯 CSS 来截断，思路是使用 float 属性，让另一个元素覆盖掉最后的地方
效果图如下

为了方便理解，添加了背景色区分每一块

参考来源：

http://dev.mobify.com/blog/multiline-ellipsis-in-pure-css/

在 flexbox 中截断文本的问题

我们期望的效果是两个文本在同一行各占百分之五十，溢出的文本被 ...截断，但实际的效果是两段文字都在同一排完整的显示出来了。（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