javascript - div 中的文本 : splitting in middle when it word wraps

Question

我有一个居中的文本短语，在某些设备上适合一行，但在其他设备上会换成两行。文本位于 div .在某些设备上，它几乎不会太长，所以只有最后一个单词换行。从美学上讲，这看起来很糟糕。我希望我能做的是将短语从中间分开，所以每行都以相似的长度居中。
我试过这个CSS:

text-align: center;
margin: 0 auto;
width: 100%;

但这只会让我遇到我描述的问题。在谷歌搜索如何进行之后，我还没有找到任何可行的解决方案。实际上，我没有找到任何人试图问同样的问题，所以我怀疑我的搜索词有问题。你如何在文本中间而不是在右侧换行？

Answer 1

这是 HTML 和 Web 开发工作方式的内在本质。它自然是“响应式”的，文本将以其父元素的宽度换行。我从您那里听到的是，您希望避免在您的文本中出现“寡妇”。这在 web-dev 中不是一个容易解决的问题，但是我发现了一些技术，其中大多数需要一些手动注意，考虑到每个实例都可以是唯一的，这在某种程度上是合适的。
如果您有精确的布局，您可以设置 width或 max-width在父元素上，并在需要时使用媒体查询来更改它。
HTML

<div class="parent">
    <p>Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue.</p>
</div>

CSS

.parent {
    max-width: 288px;
}

@media (min-width: 600px) {
    .parent {
        max-width: 568px;
    }
} 

另一种技术是添加不间断空格  在最后两个单词之间，有效地使它们成为一个单词，没有另一个单词就不会换行。这看起来更好一些，并且可以很好地工作，特别是如果它们是简短的单词。
HTML

<div class="parent">
    <p>Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra&nbsp;augue.</p>
</div>

另一种技术类似于  而是我们一个 span和样式来实现相同的目标。这在 CMS 编辑器或您需要为分组设置样式的地方或非中断空间不起作用的地方可能很有用。
HTML

<div class="parent">
    <p>Curabitur blandit tempus porttitor. Nulla vitae elit libero, a <span class="nowrap">pharetra augue.</span></p>
</div>

CSS

.nowrap {
    white-space: nowrap;
}