在 CSS 或 HTML 中规定换行位置

Question

我网站的顶部需要居中对齐 'message stripe'，并包含以下重要信息："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!"

但是，当用户将 window 变窄时，我不希望 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>

Answer 1

CSS 有一些东西 - 例如使用白色 space。但正如您所指的浏览器 'narrowing'，您可以使用媒体查询来控制每个媒体查询的文本宽度。例如：

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

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

Answer 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*/}
}

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

Answer 3

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

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>

通过对跨度进行分层，您几乎可以在任何需要的地方放置休息点。

Answer 4

您可以将消息的每个 "chunk" 放入  并将这些跨度设置为 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>

（运行上述代码片段处于 "full page" 模式，您将能够调整浏览器的大小 window 以查看其工作原理）

在 CSS 或 HTML 中规定换行位置

Prescribing line break positions in CSS or HTML

html

css

line-breaks