如何使用媒体查询将文本下拉到第二行？

Question

当我的网站达到特定尺寸时，我希望徽标分成两半，以便摄影和设计位于第二行。我将如何做到这一点？

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

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

Answer 1

最简单的方法是添加一个跨度，将您想要的内容环绕在自己的行上，然后定位它并分配它 display: block;

我强烈建议您通过适当的 class 名称选择等使它更强大。

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>

如何使用媒体查询将文本下拉到第二行？

How can I make text drop down to a second line using media queries?

html

css

media-queries