Ігнорувати <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;}

DEMO

Розрив лінії досягається просто встановленням відповідного елемента прольоту display:block.

Використовуючи ідентифікатори та / або класи в розмітці HTML, ви можете легко орієнтуватися на кожен окремий або комбінацію прольотних елементів за допомогою CSS або використовувати CSS-селектори, як-от nth-child().

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

Ви також можете просто додати / видалити / переключити класи за допомогою Javascript (jQuery).

«Перевагою» цього методу є його надійність - працює у кожному браузері, що підтримує псевдоелементи (див.: Чи можу я використовувати - Вміст, створений CSS ).

Як альтернатива також можна додати розрив рядка через псевдоелементи:

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

DEMO

Для мене краще виглядає так:

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

Але якщо ви цього не хочете, то чому ви туди ставите?