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

Ответ 1

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

br {
    display: none;
}

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

h3 br {
    display: none;
}

Ответ 2

Примечание. Это решение работает только для браузеров 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, например.

Он работает в основном для псевдотега.

Ответ 3

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

br{
    display: none;
}

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

Ответ 4

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

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

Ответ 5

Вы можете использовать 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;}

DEMO

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

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

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

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

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

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

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

DEMO

Ответ 6

Для этого вы можете просто сделать следующее:

br{display: none;}

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

pre {white-space: normal;}

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

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

Я думаю, вы получили его

Ответ 7

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

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

br {
display: none;
}

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

Ответ 8

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

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

Посмотрите.

Ответ 9

В соответствии с вашим вопросом, чтобы решить эту проблему для Firefox и Opera с помощью Aneesh Karthik C, вам нужно добавить атрибут "плавать" справа.

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

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

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

Ответ 10

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

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>