在 CSS 或 HTML 中规定换行符位置答案

【问题标题】：Prescribing line break positions in CSS or HTML在 CSS 或 HTML 中规定换行符位置
【发布时间】：2015-10-10 23:46:30
【问题描述】：

我的网站顶部需要有一个居中对齐的“消息条纹”，其中包含以下重要消息：“Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem voluptates, obcaecati atque adipisci eligendi esse eum omnis quibusdam illum a eius quia facilis ex, deserunt, molestiae hic recusandae in unde！”

但是，当用户缩小窗口时，我不希望unde! 自己落到一条线上。相反，我希望eum omnis 之后的所有内容都对齐到第二行。当它变得更窄时，我想在elit. 和illum a eius 之后休息。

我想这将需要@media 查询，但我不知道该怎么做。

http://codepen.io/pgblu/pen/xGagpR

CSS：

#msgStripe {
  padding: 8px 0;
  background: #11dd44;
  line-height: 28px; 
  text-align: center;
}

HTML：

<div id="msgStripe">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem voluptates, obcaecati atque adipisci eligendi esse eum omnis quibusdam illum a eius quia facilis ex, deserunt, molestiae hic recusandae in unde!</div>

【问题讨论】：

喜欢这个？ stackoverflow.com/questions/14128787/…
所以我应该用替换所有空格除了可能是换行符的那些？
不要使用&nbsp;。
媒体查询如何在右侧引入额外的填充？这将确保unde! 永远不会自己落入新行。
抱歉 - 文本需要居中对齐。我应该提到这一点，@DrewKennedy

标签： html css line-breaks

【解决方案1】：

一种选择是将文本分成多个内联块跨度。

Codepen Demo

#msgStripe {
  padding: 8px 0;
  background: #11dd44;
  line-height: 28px; 
  text-align: center;
}

span {
  display: inline-block;
  vertical-align: top;
}

<div id="msgStripe">
  <span>Lorem ipsum dolor sit amet,</span>
  <span> consectetur adipisicing elit.</span>
  <span>Voluptatem voluptates, obcaecati atque adipisci eligendi esse eum omnis</span>
  <span>
    <span> quibusdam illum a eius</span>
    <span> quia facilis ex, deserunt, molestiae hic recusandae in unde!</span>
  </span>
</div>

通过对跨度进行分层，您可以将断点放置在几乎任何您想要的位置。

【讨论】：

其实最后用一个span不是更简单吗？ OP 只要求最后一个词不要成为孤儿。
在查看这个问题时，他似乎想要的不止这些。
是的，这是一个解决方案，但是拥有这么多 spans 会很快变得笨拙。嗯，我喜欢这个解决方案。
是的，但它的优势（几乎）不需要媒体查询。
这是最好的解决方案imho。

【解决方案2】：

关键是在文本中放置换行符（ 标签），然后用媒体查询操作 标签的显示属性。

例如，您可以将  标记与这样的类：

Lorem ipsum <br class="md" /> dolor sit <br class="sm" /> amet

并使用媒体查询来启用它们

br {display:none;/*Initially disable line breaks*/}

@media(max-width:1200px) {
    br.md {display:inline;/*Enable br tags in screen width<=1200*/}
}

@media(max-width:767px) {
    br.sm {display:inline;/*Enable br tags in screen width<=767*/}
}

您必须手动找到放置  标签的最佳位置。（通过模拟所有媒体查询断点）但是你明白了。

【讨论】：

非常hacky，不会制作容易编辑或动态的文本。不过，它应该可以工作。
@somethinghere 我同意。我只将此方法用于（几乎永久）固定文本，例如用于英雄图像的文本块叠加等。
这就是我要使用的。然而，由于条带有一个 id 标签，它的样式（#msgStripe > br）将优先于（br.md），除非后者写成（#msgStripe > br.md）

【解决方案3】：

CSS 有一些东西 - 例如使用空白。但是当您提到浏览器“缩小”时，您可以使用媒体查询来控制每个媒体查询的文本宽度。例如：

http://codepen.io/anon/pen/GJXrwX

@media screen and (max-width: 767px) {
  #msgStripe p{
    width: 600px;
    margin: 0 auto;
    line-height: 1.5em;
  }
}

【讨论】：

这里的问题是不同的浏览器和操作系统呈现不同的字体。没有办法知道这是否会推到最后一行。

【解决方案4】：

您可以将消息的每个“块”放入  并将这些跨度设置为 white-space: nowrap;

结果是，当它们适合时，跨度将在同一行上彼此相邻，但当太窄时，整个跨度将一起移动到下一行，而不是分解那部分文本。

.header-message {
  font-size: 8px;
  text-align: center;
  border: 1px solid black;
  padding: 8px;
}

.header-message span {
  white-space: nowrap;
}

<div class="header-message">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> <span>Voluptatem voluptates, obcaecati atque adipisci eligendi esse eum omnis quibusdam illum a eius</span> <span>quia facilis ex, deserunt, molestiae hic recusandae in unde!</span>
</div>

（在“整页”模式下运行上述代码 sn-p，您将能够调整浏览器窗口的大小以查看其工作原理）

【讨论】：