Можно ли настроить таргетинг на тег <br/> с помощью CSS?
Я хотел бы иметь 1px пунктирную линию каждый раз, когда есть разрыв строки. Я настраиваю сайт со своим собственным CSS и не могу изменить установленный HTML, иначе я бы использовал другой способ.
Я не думаю, что это возможно, но, возможно, есть способ, о котором кто-то знает.
BR создает разрыв строки, и это только разрытие строки. Поскольку у этого элемента нет контента, есть только несколько стилей, которые имеют смысл применять на нем, например clear или position. Вы можете установить границу BR, но вы не увидите ее, поскольку она не имеет визуального измерения.
Если вам нравится визуально разделить два предложения, то вы, вероятно, захотите использовать горизонтальную линейку которая предназначена для этой цели. Поскольку вы не можете изменить разметку, я боюсь использовать только CSS, вы не можете этого достичь.
Кажется, он уже обсуждался на других форумах. Выдержка из Re: Установка высоты элемента BR с помощью CSS:
[T] его приводит к несколько нечетному статусу для БР в том, что, с одной стороны, это не рассматриваемый как нормальный элемент, но вместо этого в качестве экземпляра \A в но с другой стороны рука рассматривается как нормальная элемент в том, что (ограниченное подмножество) Свойства CSS допускаются он.
Я также нашел разъяснение в спецификации CSS 1 (спецификация более высокого уровня не упоминает об этом):
Существующие свойства и значения CSS1 не могут описывать поведение элемент BR. В HTML, "BR элемент указывает разрыв строки между слова. По сути, элемент заменяется на разрыв строки. Будущее версии CSS могут обрабатывать добавленные и заменили контент, но основанный на CSS1 formatters должны относиться к BR специально.
Тесты Гранта Вагнера показывают, что стиль BR не существует, как вы можете сделать с другими элементами. Существует также сайт в Интернете, где вы можете проверить результаты в своем браузере.
Обновление
сделанные некоторые дополнительные исследования, и указал, что IE8 (на Win7) и Chrome 2/Safari 4b позволяет немного стилизовать BR. И действительно, я проверил демонстрационную страницу IE с IE Net Renderer IE8 engine, и это сработало.
Обновление 2
c69 сделал некоторые дальнейшие исследования, и, оказывается, вы можете наметить маркер для BR довольно сильно (хотя и не кросс-браузер), но это не повлияет на сам разрыв строки, поскольку, похоже, это принадлежит родительскому контейнеру.
Попробуйте следующее: я собрал его, используя Update 2 из другого ответа с высоким голосом, и он отлично сработал у меня:
br
{ content: "A" !important;
display: block !important;
margin-bottom: 1.5em !important;
}
В интересах любых будущих посетителей, которые, возможно, пропустили мои комментарии:
br {
border-bottom:1px dashed black;
}
не работает.
Он был протестирован в IE 6, 7 и 8, Firefox 2, 3 и 3.5B4, Safari 3 и 4 для Windows, Opera 9.6 и 10 (alpha) и Google Chrome (версия 2), и он не работал в любом из них. Если в какой-то момент в будущем кто-то найдет браузер, который поддерживает границу с элементом <br>, не стесняйтесь обновлять этот список.
Также обратите внимание, что я пробовал несколько других вещей:
br {
border-bottom:1px dashed black;
display:block;
}
br:before { /* and :after */
border-bottom:1px dashed black;
/* content and display added as per porneL comment */
content: "";
display: block;
}
br { /* and :before and :after */
content: url(a_dashed_line_image);
}
Из них следующее работает в Opera 9.6 и 10 (alpha) (спасибо porneL!):
br:after {
border-bottom:1px dashed black;
content: "";
display: block;
}
Не очень полезно, когда он поддерживается только в одном браузере, но мне всегда интересно узнать, как различные браузеры реализуют спецификацию.
Есть одна веская причина, по которой вам понадобится стиль тега <br>.
Когда он является частью кода, который вы не хотите (или не можете) изменить, и вы хотите, чтобы этот конкретный <br> не отображался.
.xxx br {display:none}
Может сэкономить много времени, а иногда и ваш день.
Я знаю, что вы не можете редактировать HTML, но если вы можете изменить CSS, можете ли вы добавить javascript?
Если это так, вы можете включить jquery, тогда вы могли бы сделать
<script language="javascript">
$(document).ready(function() {
$('br').append('<span class="myclass"></span>');
});
</script>
br { padding: 1px 8px; border-bottom: 1px dashed #000 }
отображает, как показано ниже, в IE8... не очень много используется только в одном браузере.
(N.B. Я использую IE 8.0.7100 (на Win7 RC), если это имеет значение)
Кроме того,
br:after { content: "..." }
br { content: "" }`
или,
br:after {
border: 1px none black;
border-bottom-style: dashed;
content: "";
padding: 0 6px 0;
}
br { content: "" }
дает пунктирную линию в Chrome 2/Safari 4b, но теряет разрыв строки, который (если только кто-либо не придумает способ его повторного ввода) делает его менее бесполезным.
например.
Тест IE8, Тест Chrome/Safari и еще
Мои собственные тесты окончательно показывают, что теги br не хотят быть нацеленными на css.
Но если вы можете добавить стиль, то, вероятно, вы также можете добавить тег-скрипт в заголовок страницы?
Ссылка на внешний .js, который делает что-то вроде этого:
function replaceLineBreaksWithHorizontalRulesInElement( element )
{
elems = element.getElementsByTagName( 'br' );
for ( var i = 0; i < elems.length; i ++ )
{
br = elems.item( i );
hr = document.createElement( 'hr' );
br.parentNode.replaceChild( hr, br );
}
}
Итак, это не оптимально, но вот мое решение.
это, похоже, решает проблему:
<!DOCTYPE html>
<style type="text/css">
#someContainer br { display:none }
#someContainer br + a:before { content:"|"; color: transparent; letter-spacing:-100px; border-left: 1px dashed black; margin:0 5px; }
</style>
<div id="someContainer"><a>link</a><br /><a>link</a><br /><a>link</a></div>
BR является встроенным элементом, а не блочным элементом.
Итак, вам нужно:
br.Underline{
border-bottom:1px dashed black;
display: block;
}
В противном случае браузеры, которые немного разбираются в таких вещах, откажутся применять границы к вашим элементам BR, поскольку встроенные элементы не имеют границ, отступов или полей.
Это будет работать, но только в IE. Я тестировал его в IE8.
br {
border-bottom: 1px dashed #000000;
background-color: #ffffff;
display: block;
}
Я поместил тэг <br> в тег <span> и смог использовать display:none; в <span> для управления, если не использовать тег <br>, используя Media Queries.
старый вопрос, но это довольно аккуратное и чистое исправление, может быть использовано для людей, которым все еще интересно, возможно ли это:):
br{
content: '.';
display: inline-block;
width: 100%;
border-bottom: 1px dashed black;
}Почему бы просто не использовать тег HR? Он сделал именно то, что вы хотите. Как будто попробуй сделать вилку для еды супом, когда на столе есть ложка прямо перед тобой.