CSS разные свойства на разных размерах экрана

Question

Когда размер экрана становится определенным размером (560 пикселей), мне бы хотелось, чтобы код html редактировался немного.

В любой момент размер> 560px:

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

В любом размере < 560px:

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

Как я умею редактировать эту строку HTML через мой файл CSS?

Answer 1

Изменить код на следующее:

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

Answer 2

Вы не можете, но <br /> может принимать display:none; и display:block; как и любой другой элемент.

Пользуясь этими знаниями, используйте display:none по умолчанию, затем используйте медиа-запрос для применения display:block, когда ширина слишком узкая.

Answer 3

Вы не можете изменить HTML с помощью CSS, но вы можете добавить word-wrap: break-word, чтобы текст соответствовал меньшим экранам.