Html 当视口变得太小时，将三个单词分成三行

当较小的“获取”视口第一次触发分词时，是否有一种本机或良好的浏览器支持的方式将所有单词一次包装起来

例如：

2015年7月至2016年1月

让我们说三个字。作为标准，当视口在第一个事件中变小时，它将中断：

2015年7月至
2016年1月

在第二种情况下：

2015年7月
到
2016年1月

我尝试过使用空白和不可见的html字符，但没有成功。它应该看起来像在第二个事件中，第一个事件示例永远不会发生

---

我忘了在flexbox中使用它（display:flex；）

请在媒体查询中使用它

.className{display:table caption；}

`http://jsfiddle.net/zgKbg/`

---

在不同的视口中添加宽度。这是一个很好的解决方案，但它只适用于最长的“单词”不超过短语其余部分的两个后续单词的情况。仍然很好-upvoteaddition to my previous comment:这两个div之间的区别只是一个空格（“八九”），它位于一个复杂的flexbox“表”中，实际上在所有视口中都可以在没有媒体查询的情况下工作。这是因为我想创建一个尽可能通用和可用的程序。

@media only screen and (max-width: 1024px) {
.custDate{display:inline;}
}

@media only screen and (max-width: 768px) {
.custDate{display:inline;}
}

@media only screen and (max-width: 320px) {
 .custDate{display:table-caption;}
}