如果不适合窗口/父级大小，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 span声明为display：block

Answer 2

您也可以使用非中断空格强制执行此操作：

Period:
From May 2013
To April 2013

Answer 3

<div><span>Period:</span><span>From May 2012</span><span>To May 2013 </span>

div span {
    display: inline-block;
}