html - 在 CSS 或 HTML 中规定换行位置

Question

我网站的顶部需要有一个居中对齐的“消息 strip ”，其中包含以下重要消息:“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>

Answer 1

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

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>

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