我为销售或电子邮件设计了大量简单的单页 Web 项目。我经常发现我在不同的媒体宽度上遇到标题和我想要的换行符的问题。
例如，我可以有一个标题，例如：
我们的新东西是自切片面包以来最好的东西！
完全不注意换行符，换行符如下：
我们的新东西是自
切片面包以来最好的东西！
在完整的网络尺寸下，我想在“the”之后换行。创建两条线。
我们的新
东西是自切片面包以来最好的东西！
对于中等宽度的屏幕，我会中断两次：
我们的新东西是自切片面包以来
最好的东西！
对于更窄的屏幕，我会在“new”、“thingamabob”和“thing”之后中断。创建四行。
我们的新
东西是自切片面包以来
最好的东西！
我真的不想使用中断标记 ( <br>)，因为这会硬设置所有大小的中断。到目前为止，我已经为各种标签使用了媒体查询和宽度百分比，h1以便h5标签的宽度强制中断。但这对我来说似乎很“骇人听闻”（根据实际文本，有时它也很喜怒无常）。
在不将换行符硬编码到 html 中的情况下，控制换行符的最佳方法是什么？
我只是在它用于短文本而不是段落的基础上提出建议。
标题的格式可以而且应该尽可能地控制在合理的范围内。JavaScript 或额外不必要的元素并不是“合理的限制”。
另一方面，非中断空间......在适度使用时会很有用。
将它们放在您想要放在一起的单词对和三元组之间可以产生您想要的结果。
但是，您不能连续使用多个，这取决于您使用的单词的长度，链接太多会迫使文本溢出视口或其容器。
对您自己的特定单词集进行一些快速实验应该会发现要链接的最佳单词。
对于此问题中的示例，HTML 可能如下所示：
<span>Our New thingamabob is the best thing since sliced bread!</span>
这里实际上不需要 CSS。我制作的这个例子中的 CSS只是为了好玩。
重新阅读问题后，我意识到我并没有完全满足要求。对于这种特定情况，并假设还有其他页面需要同样的注意，我将为<br>全角断点定义一个。然后，我会在标题中最理想的位置在每个页面上重复使用相同的类。
使用媒体查询，此类<br>将在小于全角的任何地方折叠，就好像它甚至不存在一样。在视口尺寸小于全宽时，我们仅依赖 's。
另一个<br>更接近标记的例子。
的HTML：
<span>
Our New thingamabob is the<br class="full-width-breakpoint"/> best thing since sliced bread!
</span>
CSS：
@media screen and (max-width:550px) { /* Max Width depends on your design */
.full-width-breakpoint { /* only experimentation or */
display:none; /* calculation will reveal */
line-height:0; /* the best max-width */
}
}
最佳实践是承认您无法真正控制 Web 上的换行符，并且最好在设计时考虑到这一点。
任何相反的解决方案总是必须是hacky。因为 HTML 不遵守硬编码之外的用户定义的换行符，这将是一个 hack。你可以很容易地用 JS 做到这一点。使用具有唯一类的空 span 设置断点，然后根据视口大小，您可以将 BR 标签注入所需的每个 SPAN。
有一些 CSS 样式可以在较新的浏览器上工作，以控制浏览器处理换行的方式，但在这种情况下，它仍然无法为您提供所需的精确控制。
另一方面，如果您的目标不是控制特定的换行符，而是为了确保您的文本块“堆叠”在相对均匀的行中，我会为每个视口设置不同的 DIV 宽度。它不会是完美的，但可能非常接近并且可能是最好的折衷方案。
这是一个 Adobe 制作的插件，与Adobe 的提议一起创建，以获得一个 CSS 选项text-wrap: balance;，就像 Adobe InDesign 的 Balance Ragged Lines 功能一样（听起来很棒，但即使它被接受，浏览器支持它也需要数年时间）。
但是，该插件现在可以使用。它平衡任何具有类的元素balance-text，或使用 jQuery 之类的$('.some-elements').balanceText();
限制
此代码目前仅适用于没有内联元素的块级标签中的文本。
在演示 4 中，您将看到平衡文本块中的任何内容（如<a>链接、<span>s 或强调（如<em>、<strong>、<b>等））是如何<i>被删除的。
此外，比较演示 1、2 和 5，您会发现您似乎需要同时使用CSS类和 jQuery 调用。
它看起来相当可靠，但有时会出现故障 - 在撰写本文时，它偶尔会在侧栏中滑倒，留下孤立的孤儿（但它似乎在 95% 以上的时间都有效，我还没有看到它滑倒，除了在侧栏中时），并且由于无法解释的原因，我的演示无法在 Firefox 上运行，但 Adobe 的演示可以（在 IE9+ 中很好，现在无法在 IE8 中测试）。如果您使用它，请考虑一些测试时间。
您可以使用 JavaScript 检测屏幕宽度，并通过 innerHTML 将正确的版本（与您在帖子中使用的一样）写入一个空的 div。
不幸的是，“所需的网络中断”和“最佳网络实践”不能同时存在。放下你的完美主义欲望，把每一个词都放在正确的位置——屏幕上的可能性太多了，还有太多没有设计师思维的读者，你甚至不得不关心标题中的换行符。查阅响应式网页设计以更好地理解这些问题。