在CSS或HTML中指定断行位置

Question

我的网站顶部需要有一个中正的‘消息条’，并带有以下重要信息："Lorem ipsum dolor同坐，consectetur adipisicing . Voluptatem，obcaecati quia eligendi e eum omnis a eius quia a 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

关键是在文本中放置换行符(<br>标记)，然后使用媒体查询操作所述<br>标记的display属性。

例如，您可以将<br>标记与这样的类放在一起：

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

您必须找到手动放置<br>标记的最佳位置。(通过模拟所有的媒体查询断点)，但是您得到了这个想法。

Answer 2

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

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 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;
  }
}