如何使用媒体查询添加换行符？

Question

如果屏幕宽度小于X，我正在寻找一种添加换行符的方法。

在较小的屏幕宽度上，文本的一半应保留在下一行，而不是一个字。

---

大屏幕上的普通视图：

较小屏幕上的普通视图：

小屏幕上的结果：

较薄的文字无关

---

我正在寻找一种使用CSS的方法。

Answer 1

将@media查询与span元素一起使用，并将它们转为display: block;，因为默认情况下它们是内联的...

Demo （调整小提琴窗口的大小）

div {
    font-size: 30px;
    font-family: Arial;
}

@media screen and (max-width: 400px) {
    div span:last-of-type {
        display: block;
        color: #f00;
    }
}

@media screen and (max-width: 300px) {
    div span:nth-of-type(2) {
        display: block;
        color: #00f;
    }
}

说明：在这里，我默认使用{em> inline 的span元素包装每个单词。所以我要做的是，我把它们转到{{ 1}}如果屏幕分辨率低于某些display: block;。

您可以通过应用px和display: block;来满足您的要求，从而使这些变得灵活。

如果屏幕尺寸最大为display: inline-block;

---

如果屏幕尺寸最大为400px

更改颜色，以便您可以看到效果。

Answer 2

在您的代码中添加br，最初使用css隐藏它，并在宽度符合您的要求时在媒体查询中将其display: inline

http://jsfiddle.net/LnECr/1/

br{ display: none; }
@media all and (max-width: 480px) {
    .break2 { display: inline }
}

@media all and (max-width: 320px) {
    br { display: inline }
}

我可以通过许多不同的方式使用br，因为您要求br

Answer 3

我不会使用<br />标记。请改用CSS white-space:nowrap。

像这样：

<h1>Creative <span class="wrap">Web Design</span></h1>

@media screen and (max-width:480px) {
span.wrap {
white-space:nowrap;
}

}