2013-04-30 6 views
8

Есть ли решение для разрыва строки, когда разрешение экрана мало, а не <br>?Разрыв строки для медиа-запроса?

потому br разрыв строки все время :(

Вот мой код <h2>I create unique, clean sites that are easy to navigate.<br>All my works comply with web</h2>

Я думаю, CSS3 может иметь решение этой проблемы

есть ли решение этой <br> потому, что разрыв строки только когда страница на мобильном телефоне

Заранее благодарим за вашу помощь

+3

Я люблю 'Все мои работы соответствуют сетям' :-) –

+2

завернуть второе предложение в двускатном элемент, а затем назначить ' display: block' к элементу с заданной шириной. Но я бы хотел, чтобы было более чистое решение, чем это, или с использованием
. – fcalderan

ответ

15

Вы можете просто добавить класс в тег BR и установить его отображение: по умолчанию нет.

Затем в мобильном запросе медиа установить его на «дисплей: статический»

Я предложил статический, а не блок, потому что я не думаю, что BR тег индикаторный блок по умолчанию, так что, вероятно, лучше просто пойдите со статикой.

+1

http://jsbin.com/iyamum/2/edit. Хорошо, он работает и с «мобильным первым подходом» нет необходимости менять отображение - просто не забудьте поставить пробел между точкой и '
' – fcalderan

+1

'display' не имеет значения свойства, называемого' static', поэтому лучше использовать 'block'. Для справки http://www.w3schools.com/jsref/prop_style_display.asp. Но мне все еще интересно, что такое свойство отображения по умолчанию для '
' – Syed

+1

@Syed - Несколько штук на позиции static: http://alistapart.com/article/css-positioning-101 https://css-tricks.com/ what-if-there-was-no-position-static/https://developer.mozilla.org/en/docs/Web/CSS/position –

2

Вы можете просто использовать поплавки, так что вам никогда не нужно даже думать о том, где должна быть точка привязки. Он либо отображается как рядом друг с другом, либо мгновенно привязывается к следующей строке, если они не подходят.

span { 
    display: block; 
    float: left; 
    margin-right: 0.4em; 
} 

jsFiddle: http://jsfiddle.net/e4mWK/

+0

Это приятное умное чистое решение ! – dkamins

+0

В дополнение к ответу Кристиана вы также можете использовать белое пространство CSS: nowrap; чтобы обернуть фрагменты текста, которые вы не хотите прерывать. I.e слоган, собственное имя и т. Д. – Yann

5

При использовании Bootstrap:

<br class="visible-xs"> 
+2

да, это один из лучших ответов, если загрузочный тег помечен в вопросе – Muhammed

Смежные вопросы