Игнорировать <br> с помощью CSS?

Я работаю над сайтом, на котором вставлены разрывы строк, как <br>в некоторых заголовках. Предполагая, что я не могу редактировать исходный HTML, есть ли способ с помощью CSS игнорировать эти разрывы?

Я оптимизирую сайт для мобильных устройств, поэтому на самом деле я не хочу использовать JavaScript.

С помощью css вы можете «скрыть» теги br, и они не будут иметь эффекта:

br {
    display: none;
}

Если вы хотите скрыть только некоторые элементы в определенном типе заголовка, просто сделайте свой CSS более конкретным.

h3 br {
    display: none;
}

Примечание. Это решение работает только для браузеров Webkit, которые неправильно применяют псевдоэлементы к самозакрывающимся тегам.

В качестве дополнения к приведенным выше ответам стоит отметить, что в некоторых случаях нужно вставить пробел, а не просто игнорировать <br>:

Например, приведенные выше ответы превратятся

Monday<br>05 August

к

Monday05 August

как я подтвердил, пытаясь отформатировать свой еженедельный календарь событий. Пробел после «понедельника» рекомендуется вставлять. Это легко сделать, вставив в CSS следующее:

br  {
    content: ' '
}
br:after {
    content: ' '
}

Это сделает

Monday<br>05 August

выглядит как

Monday 05 August

Вы можете изменить contentатрибут br:afterна, ', 'если хотите разделить его запятыми, или вставить что угодно, ' 'чтобы сделать его разделителем! Кстати

Monday, 05 August

выглядит аккуратно ;-)

См. Здесь для справки.

Как и в приведенных выше ответах, если вы хотите сделать его специфичным для тега, вы можете. Например, если вы хотите, чтобы это свойство работало для тега <h3>, просто добавьте h3каждый перед brи br:after, например.

Обычно это работает с псевдо-тегом.

Если добавить в стиль

br{
    display: none;
}

Тогда это сработает. Не уверен, что он будет работать в более старых версиях IE.

Вот как я это делаю:

br { 
    display: inline;
    content: ' ';
    clear:none;
}

Вы можете использовать spanэлементы вместо, brесли хотите, чтобы метод пробелов работал, поскольку он зависит от псевдоэлементов, которые «не определены» для заменяемых элементов.

HTML

<p>
   To break lines<span class="line-break">in a paragraph,</span><span>don't use</span><span>the 'br' element.</span>
</p>

CSS

span {white-space: pre;}

span:after {content: ' ';}

span.line-break {display: block;}

span.line-break:after {content: none;}

ДЕМО

Разрыв строки просто достигается путем установки соответствующего элемента span на display:block.

Используя идентификаторы и / или классы в разметке HTML, вы можете легко настроить таргетинг на каждый отдельный или комбинацию элементов span с помощью CSS или использовать селекторы CSS, например nth-child().

Таким образом, вы можете, например, определять различные точки останова, используя медиа-запросы для адаптивного макета.

И вы также можете просто добавлять / удалять / переключать классы с помощью Javascript (jQuery).

«Преимуществом» этого метода является его надежность - он работает во всех браузерах, поддерживающих псевдоэлементы (см. Могу ли я использовать - контент, созданный CSS ).

В качестве альтернативы также можно добавить разрыв строки с помощью псевдоэлементов:

span.break:before {  
    content: "\A";
    white-space: pre;
}

ДЕМО

Для меня лучше выглядит так:

Some text, Some text, Some text

br {
  display: inline;
  content: '';
}

br:after {
  content: ', ';
  display: inline-block;
}

<div style="display:block">
  <span>Some text</span>
  <br>
  <span>Some text</span>
  <br>
  <span>Some text</span>
</div>

Для этого вы можете сделать так:

br{display: none;}

и если он находится внутри некоторого тега PRE, вы можете, и если вы хотите, чтобы тег PRE вел себя как обычный блочный элемент, вы можете использовать этот CSS:

pre {white-space: normal;}

Или вы можете следовать стилю Aneesh Karthik C, например:

br  {content: ' '}
br:after {content: ' '}

Я думаю ты понял

Согласно вашему вопросу, чтобы решить эту проблему для Firefox и Opera с использованием подхода Aneesh Karthik C, вам необходимо добавить атрибут "float" right.

Посмотрите пример здесь. Этот CSS работает в Firefox (26.0), Opera (12.15), Chrome (32.0.1700) и Safari (7.0).

br {
   content: " ";  
   float:right; 
}

Надеюсь, это ответит на ваш вопрос !!

Хотя этот вопрос, похоже, уже решен, принятый ответ не решил проблему для меня в Firefox. Firefox (и, возможно, IE, хотя я его не пробовал) пропускает пробелы при чтении содержимого тега «content». Хотя я полностью понимаю, почему Mozilla так поступила, это приносит свою долю проблем. Самый простой обходной путь, который я нашел, - использовать неразрывные пробелы вместо обычных, как показано ниже.

.noLineBreaks br:before{
content: '\a0'
}

Посмотри .

Да, вы можете игнорировать это <br>. Это может вам понадобиться, особенно в случае адаптивного дизайна, когда вам нужно убрать паузы для мобильных устройств.

HTML

<h2>

  Where ever you go <br class="break"> i am there.

</h2>

CSS для мобильного примера

/* Resize the browser window to check */

@media (max-width: 640px) 
{
  .break {display: none;}
}

Посмотрите этот Codepen:
https://codepen.io/fluidbrush/pen/pojGQyM

Вы можете просто преобразовать его в комментарий ..

Или вы можете сделать это:

br {
display: none;
}

Но если вы этого не хотите, зачем вы это кладете?