CSS 中的高级换行

Question

我有以下代码：

<time>2018-23-12&nbsp;23:59</time> — <time>2018-24-12&nbsp;23:59</time>

问题是破折号。当第二个时间标签换行时，破折号应该换行。当不需要中断时，文本应该保持原样。

所以输出行为，我试图强制的是：

<time>2018-23-12&nbsp;23:59</time>
—
<time>2018-24-12&nbsp;23:59</time>

有什么解决办法吗？感谢大家的帮助:-)

Answer 1

使用display:block;到time

time{
display:block;
}

<time>2018-23-12&nbsp;23:59</time> — <time>2018-24-12&nbsp;23:59</time>

Answer 2

time,
span {
  display: inline-block;
}

<time>2018-23-12&nbsp;23:59</time> <span>—</span> <time>2018-24-12&nbsp;23:59</time>

是这样的吗？

Answer 3

$("section").resizable();

section{
  outline: 1px solid pink;
  max-width: 80%;
  min-height: 80px;
}

time{
  display:inline-block;
  white-space: nowrap;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<section>
  <time>2018-23-12&nbsp;23:59</time>
  &ndash;
  <time>2018-24-12&nbsp;23:59</time>
</section>

如果您希望 - 单独成一行，您可能需要一些 javascript 来检测换行符并相应地更改 HTML

CSS 中的高级换行

Advanced wraps in CSS

css

line-breaks

word-wrap