我设计了大量用于销售或电子邮件的简单单页Web项目。我经常发现我遇到标题问题，并且在不同的介质宽度下需要换行。
例如，我可能有一个标题，例如：
自切成薄片以来，我们的新东西就是最好的东西！
在绝对不注意换行的情况下，换行是这样的：
自
切成薄片以来，我们的新东西就是最好的东西！
以完整的网页尺寸，我想在“ the”之后换行。创建两行。
自切成薄片以来，我们的新东西就是最好的东西！
对于中等宽度的屏幕，我会断裂两次：
自切成薄片以来，我们的新
东西就是最好的东西
！
对于更窄的屏幕，我会在“ new”之后，“ thingamabob”之后和“ thing”之后进行切换。创建四行。
我们的新
thingamabob
是最好的事情
，因为切片面包！
我真的不想使用中断标签（<br>），因为这样很难设置所有尺寸的中断。到目前为止，我已经对各种h1- h5标签使用了媒体查询和宽度百分比，以便标签的宽度强制中断。但这对我来说似乎是“ hacky”（有时根据实际文本也很气质）。
控制换行而不将其硬编码到html中的最佳方法是什么？
Answers:
我只是基于将其用于文本的简短片段而不是段落的建议。
标题的格式可以并且应该被控制在合理的范围内。JavaScript或其他不必要的元素并不是很“合理的限制”。
另一方面，非突破性空格 ...在进行适度使用时会很有用。
将它们放在希望保持在一起的单词对和三胞胎之间可以产生所需的结果。
但是，根据使用的单词的长度，您不能连续使用很多，链接太多会迫使文本溢出视口或其容器。
对您自己的特定单词集进行一些快速实验，可以发现要链接的最佳单词。
对于此问题的示例，HTML可能如下所示：
<span>Our New thingamabob is the best thing since sliced bread!</span>
实际上，这里没有必要使用CSS。我在此示例中制作的CSS 只是为了好玩。
重新阅读问题后，我意识到我不太满足要求。对于这种特定情况，并假设还有其他页面也需要同样的关注，我将为<br>全角断点定义一个页面。然后，我将在标题中最理想的位置在每个页面上重用同一类。
<br>使用媒体查询时，此类可能会以小于全角的大小崩溃，甚至好像不存在。在小于全角的视口中，我们仅依靠 。
另一个例子，其中一个<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上的换行没有真正的控制权，因此最好在设计时考虑到这一点。
与此相反的任何解决方案都将不可避免地变得笨拙。因为HTML不会遵循硬编码之外的用户定义的换行符，这将是一个hack。您可以使用JS轻松实现。使用具有唯一类的空跨度设置断点，然后根据视口大小，可以将BR标签插入所需的每个SPAN中。
有些CSS样式可在较新的浏览器上工作，以控制浏览器处理换行的方式，但在这种情况下，它仍然无法为您提供所需的确切控制。
另一方面，如果您的目标不是控制特定的换行符，而是要确保文本块以相对均匀的行“堆叠”，那么我将为每个视口分别设置DIV的宽度。它不是完美的，但可能非常接近，并且可能是最好的折衷方案。
这是一个Adobe制造的插件，与Adobe的提议text-wrap: balance;一起创建，旨在获得CSS选项，就像Adobe InDesign的Balance Ragged Lines功能（听起来不错，但即使被接受，浏览器支持它还需要很多年）。
但是，该插件现在可以使用。它平衡具有class balance-text或使用jQuery 之类的任何元素$('.some-elements').balanceText();
这是我使用左对齐<h1>s 制作的演示 -单击edit查看代码。这显示了撰写本文时的一些限制：
局限性
该代码当前仅适用于没有内联元素的块级标签中的文本。
在演示4，你会看到像你平衡的文本块中如何什么<a>链接，<span>S或强调像<em>，<strong>，<b>，<i>等被去除。
此外，比较演示1，2和5，你会看到你似乎需要使用两个 CSS类和jQuery的调用。
似乎中等可靠，但有时会出现故障-在撰写本文时，它在侧列中偶尔会滑落，留下孤独的孤儿（但它在95％以上的时间中都起作用，但我尚未看到它滑落，除了并在旁栏中显示），并且由于无法解释的原因，我的演示无法在Firefox上运行，但Adobe的演示却可以（在IE9 +中可以正常使用，目前无法在IE8中进行测试）。如果使用它，请考虑一些测试时间。
我必须有规律地处理此问题，而设计师希望这些东西能以某种方式打破。我发现最简单的方法是在文本中放置一个带有类的跨度，然后将该跨度display: block;用于媒体查询。
所以看起来像这样：
<p>This is some text and I want <span class="mobile-only-line-break">only this text to break, but only on mobile</span></p>
然后我会有类似这样的CSS：
@media all and (max-width: 767px) {
.mobile-only-line-break {
display: block;
}
}
您仍然必须仔细检查并确保所有事情都按照您想要的方式进行。
如果经常出现问题，则可以在Twitter Bootstrap或使用的任何网格系统中创建自己的换行类集，并根据使用的命名约定对类名称进行建模。
您可以使用JavaScript来检测屏幕宽度，然后通过innerHTML将正确的版本（在帖子中使用<br>形式）写入一个空的div中。
不幸的是，“期望的网络中断”和“最佳的网络实践”并没有在一起。放宽您的完美主义者渴望将每个单词都放在正确的位置上-太多的屏幕可能性和太多的读者不具备设计师的思维方式，您甚至不必担心标题中的换行符。查找响应式Web设计，以更好地理解这些问题。
我目前的方法...
<h1>Our New thingamabob is the best thing since sliced bread!</h1>
和CSS：
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
h1 { margin: 0 auto; text-align: center; width: 280px; }
}
@media only screen
and (min-width : 321px) {
h1 { margin: 0 auto; text-align: center; width: 280px; }
}
@media only screen
and (max-width : 320px) {
h1 { margin: 0 auto; text-align: center; width: 280px; }
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
h1 { margin: 0 auto; text-align: center; width: 550px; }
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
h1 { margin: 0 auto; text-align: center; width: 800px; }
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
h1 { margin: 0 auto; text-align: center; width: 550px; }
}
@media only screen
and (min-width : 1224px) {
h1 { margin: 0 auto; text-align: center; width: 800px; }
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
h1 { margin: 0 auto; text-align: center; width: 1200px; }
}
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
h1 { margin: 0 auto; text-align: center; width: 280px; }
}
宽度有时需要根据使用的实际文本进行一些调整，但这是我使用的一般方案。本质上是减小h1标签的宽度，以使行在我希望其断开的地方断开。
这确实有效，只需要彻底测试以确保在需要的地方发生中断即可。但是，无论如何都需要进行彻底的测试。因此，在这方面并不一定需要做更多的工作。
margin: 0 auto; text-align: center;在媒体查询之外应用一次，它将应用于所有媒体查询
您可以在允许换行的地方添加white-space: nowrap和放置<wbr>。如果这还不够，并且您希望对媒体查询进行精细控制，则仍可以添加类似的类<wbr class="mobileOnly">
<wbr>doc：https：//developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr