不同屏幕尺寸的CSS不同属性

Question

当屏幕尺寸变为特定尺寸（560px）时，我希望稍微编辑html代码。

任何尺寸＆gt; 560像素：

<div id = "div"><span class = "span">TextRightHere</span></div>

任何大小＆lt; 560像素：

<div id = "div"><span class = "span">Text<br>Right<br>Here</span></div>

我如何通过CSS文件编辑这行HTML？

Answer 1

您不能，但<br />可以像其他元素一样接收display:none;和display:block;。

有了这些知识，默认情况下使用display:none，然后在宽度太窄时使用媒体查询应用display:block。

Answer 2

您无法使用CSS更改HTML，但您可以添加word-wrap: break-word以使文字适合较小的屏幕。

Answer 3

将代码更改为以下内容：

<div id = "div"><span class = "span">Text<br>Right<br>Here</span></div>

然后，使用以下css代码：

#div br{display:none;}
@media screen and (min-width:560px){
    #div br{display:none;}
}@media screen and (max-width:560px){
    #div br{display:inline;}
}