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

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

说明:在这里,我只是用默认情况下内联的span元素包装每个单词.所以我要做的是,如果屏幕分辨率小于某些,我将它们转到.display: block;px

您可以通过申请display: block;和display: inline-block;任何符合您要求的方式使这些变得灵活.

如果屏幕尺寸最大 400px

如果屏幕尺寸最大 300px

改变颜色,以便您可以看到效果.

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