Прекратить разрыв тега BR с помощью CSS

Есть ли способ остановить разрыв тега <br>, используя только CSS?

Я попробовал br{display:none} whick works, но он также избавляется от пространства между двумя словами, которое мне нужно сохранить.

Это только для webkit (iPhone), поэтому любая экстравагантность CSS3 просто прекрасна.

Я не могу редактировать контент из CMS, поэтому просто удалить тег, к сожалению, не является для меня вариантом.

спасибо!

Ответы

Ответ 1

Следуя приведенным здесь ответам, это предотвращает нарушение тега <br> как в Chrome, так и в IE:

br {
    content: " ";
    display: none;
}

Ответ 2

Хорошо, после некоторых игр я нашел решение, которое я поделюсь с вами. По-видимому, возможно полностью контролировать тег <br> с помощью CSS

button br{content:" ";border:1px solid #fff;background:red;padding:50px;}/* whatever you like */

button br:after{content:" ";}

Html -

<button>the annoying<br/>tag is gone leaving a controlable space</button>

Не уверен, что это кросс-браузер, но он работает в Webkit и iPhone, который на данный момент все, что мне нужно.

Ответ 3

Это сработало для меня:

br {content: ""}
br:after {content: "\00a0"}

Ответ 4

Как упоминается boz в комментариях к OP, это не будет возможным. Отображается только <br/> (в этом случае это возврат каретки), или нет, в этом случае у вас нет контроля над ним через CSS.

Основная проблема заключается в том, что вы используете неправильный инструмент для задания - вы хотите изменить структуру DOM, которая является доменом Javascript (по крайней мере, у клиента).

Альтернативой, которая не требует Javascript или изменения в CMS, было бы создание сервера для проксирования запросов и разбиения тегов <br/> при прохождении через документ, но это похоже на overkill

Ответ 5

Почему бы не использовать:

br {
    content: " "; /* Remove break */
    margin-right: 6px; /* Set space between text blocks */
}

Ответ 6

content: " ";
padding-right: 5px; // ok, same as margin-right

Ответ 7

См. Игнорировать <br> с CSS?. Одно из решений - это одно (что лучше всего, на мой взгляд)

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