我们如何将两个单词分解成一行？

Question

我有一个单词“ Mon 24”。 最好的方法是将其分成不同的行，如 Mon 24 通过CSS？

我尝试使用word-break: break-all，但没有运气。 https://codepen.io/bbk_khadka/pen/zbVLEp

Answer 1

将最大宽度设置为3个字符宽

.text {
  max-width: 3ch;
}

https://codepen.io/anon/pen/jJjpKV

Answer 2

word-break: break-all将不支持所有浏览器的摘要。我的建议是使用max-width和table-caption进行包装。

.text {
    display: block;
    max-width: 40px;
}

<div class='text'>Mon 24<div>

.text {
    display: table-caption;
}

Let the element behave like a <caption> element.

<div class='text'>Mon 24<div>