如果不适合窗口/父级大小，则 CSS 分三部分换行

Question

Period: From May 2013 To April 2013

如果文本不适合窗口/父级大小，我怎样才能让文本显示在一行或自动中断到三行

Period:
From May 2013
To April 2013

FIDDLE

结论

不可能用纯 CSS 来做

我的简单解决方案 - JS 及其在加载时更新一次

FIDDLE with JS

如果有人能做得更好——请提供演示

Answer 1

您可以将各个“部分”包裹在一个 span 标签中。

http://jsfiddle.net/HwZ23/1/

<p class="period"><span>Period:</span> <span>From May 2013</span> <span>To April 2013</span></p>



.period span {
    display: inline-block;
}

我应该注意，这将在正确的位置“中断”，但是，它不会总是根据屏幕分辨率格式化为三行。为此，您需要使用媒体查询。使用媒体查询，在所需的分辨率下，您可以将 .period 跨度声明为 display: block