CSS 如何在最后一个空格前换行

Question

我有一些固定宽度的 div，其中包含 1234 days ago (10/10/1900).

形式的文本

文本必须将日期部分换行 (10/10/1900) 仅当字符串太长而无法留在同一行时

我尝试在日期之前添加一个新行并应用规则 white-space: break-spaces; 但所有字符串都被换行

任何其他使用 overflow-wrap 或 word-break 的尝试都无法如我所愿

你有什么想法吗？下面我展示了我的示例代码

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.footer {
  width: 170px;
  height: 100px;
  margin-left: 20px;
  padding: 10px;
  white-space: break-spaces;
}

.wrong {
  background-color: red;
  color: white;
}

.correct {
  background-color: blue;
  color: white;
}

<div class="row">
<div class="footer wrong">1234 days ago (10/10/1900)</div>
<div class="footer correct">4 days ago (04/05/2050)</div>
</div>
<p class="wrong">The text "(10/10/1900)" must be wrapped<p>
<p class="correct">The text "(04/05/2050)" fits the line so isn't necessary to wrap<p>

Answer 1

不要写“/”，而是使用 HTML 实体 /，这样可以防止在将日期推入下一行时中断。

<div class="row">
<div class="footer wrong">1234 days ago (10&sol;10&sol;1900)</div>
<div class="footer correct">4 days ago (04&sol;05&sol;2050)</div>
</div>

Answer 2

将日期放入 span 元素中，并将 white-space 设置为 pre。

<span style="white-space: pre;">(10/10/1900)</span>

（请注意，如果日期宽度超过容器的 170px 宽度，它将继续延伸超过框而不换行。）

CSS 如何在最后一个空格前换行

CSS How to wrap text before last whitespace

css

word-wrap