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

Question

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

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

---

大屏幕上的正常 View :

小屏幕上的正常 View :

在较小屏幕上的预期结果:

较细的文本不相关

---

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

Answer 1

使用带有 span 元素的@media 查询并将它们转换为 display: block; 因为它们默认是内联的...

Demo (调整 fiddle 窗口的大小)

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 元素包裹了每个单词，默认情况下该元素是 inline 。所以我所做的是，我将它们转换为 display: block; 如果屏幕分辨率小于一些 px。

您可以通过应用 display: block; 和 display: inline-block; 满足您的要求来使它们更灵活。

如果屏幕尺寸最大为 400px

---

如果屏幕尺寸最大为 300px

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