如何使用媒體查詢將文本下拉至第二行？

Question

當我的網站尺寸特定時，我希望徽標分成兩半，以便攝影與設計位於第二行。 我將如何完成？

 @media only screen and (max-width: 424px) { } 

 <nav> <h1 class="logo">Brian Funderburke Photography &amp; Design</h1> </nav> 

Answer 1

最簡單的方法是添加一個跨度，該跨度將您想要的內容環繞在自己的行上，然后將其定位，然后將其分配給display: block;

我強烈建議您使用適當的類名選擇等來使它更強大。

HTML：

<nav>
  <h1 class="logo">Brian Funderburke <span>Photography &amp; Design</span></h1>
</nav>

CSS：

@media only screen and (max-width: 424px) {
  .logo span {
    display: block;
  }
}

https://jsfiddle.net/6vcbdqqk/

Answer 2

如果僅關於此h1和此文本，則設置width以強制文本換行。

 @media only screen and (max-width: 424px) { h1 { width: 10em; } } .demo { width: 10em; border: solid; /* remove this, demo purpose */ } 

 <nav> <h1 class="logo">Brian Funderburke Photography &amp; Design</h1> </nav> <p>below for demo</p> <h2 class="demo">Brian Funderburke Photography &amp; Design</h2> <h3 class="demo">Brian Funderburke Photography &amp; Design</h3> <p class="demo">Brian Funderburke Photography &amp; Design</p>