¿Puedes apuntar <br /> con css?


160

¿Es posible apuntar a la <br/>etiqueta de salto de línea con CSS?

Me gustaría tener una línea discontinua de 1 px cada vez que hay un salto de línea. Estoy personalizando un sitio con mi propio CSS y no puedo cambiar el conjunto de HTML, de lo contrario lo usaría de otra manera.

No creo que sea posible, pero tal vez hay una manera de que alguien sepa.


Respuestas:


169

BRgenera un salto de línea y solo es un salto de línea. Como este elemento no tiene contenido, solo hay unos pocos estilos que tienen sentido para aplicarlo, como clearo position. Puede establecer BRel borde pero no lo verá ya que no tiene dimensión visual.

Si desea separar visualmente dos oraciones, entonces probablemente quiera usar la regla horizontal que está destinada a este objetivo. Dado que no puede cambiar el marcado, me temo que usando solo CSS no puede lograr esto.

Parece que ya se ha discutido en otros foros. Extracto de Re: Configuración de la altura de un elemento BR usando CSS :

[T] esto lleva a un estado un tanto extraño para BR porque, por un lado, no se trata como un elemento normal, sino como una instancia de \ A en el contenido generado, pero por otro lado se trata como un elemento normal en el que se permite (un subconjunto limitado de) propiedades CSS.

También encontré una aclaración en la especificación CSS 1 (ninguna especificación de nivel superior lo menciona):

Las propiedades y valores actuales de CSS1 no pueden describir el comportamiento del elemento 'BR'. En HTML, el elemento 'BR' especifica un salto de línea entre palabras. En efecto, el elemento se reemplaza por un salto de línea. Las versiones futuras de CSS pueden manejar contenido agregado y reemplazado, pero los formateadores basados ​​en CSS1 deben tratar especialmente a 'BR'.

Las pruebas de Grant Wagner muestran que no hay forma de peinar BRcomo se puede hacer con otros elementos. También hay un sitio en línea donde puede probar los resultados en su navegador .

Actualizar

pelms realizó algunas investigaciones adicionales y señaló que IE8 (en Win7) y Chrome 2 / Safari 4b le permiten un BRpoco de estilo . Y de hecho, revisé la página de demostración de IE con el motor IE8 de IE Net Renderer , y funcionó.

Actualización 2 c69 hizo algunas investigaciones adicionales, y resulta que se puede peinar el marcador para brmuy fuertemente (aunque, no a través del navegador), sin embargo, esto no afectará a la ruptura del verso en sí, ya que parecen pertenecer al contenedor principal.


Gran respuesta. Si no es un navegador cruzado, no vale la pena intentar darle un estilo a menos que solo se dirija al único navegador (por ejemplo, solo dispositivo móvil). De lo contrario, parece tener sentido modificar su HTML para permitir el estilo (<p> etiquetas, ¿alguien?)
Razzed

49

Intente lo siguiente, lo armé usando la Actualización 2 de otra respuesta con altos votos, y funcionó perfectamente para mí:

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}

No parece funcionar en Edge e IE, pero no son navegadores reales.
Bufón

31

Hay una buena razón por la que necesitaría diseñar una <br>etiqueta.

Cuando forma parte del código, no desea (o no puede) cambiar y desea que este en particular <br>no se muestre.

.xxx br {display:none}

Puede ahorrarle mucho tiempo y, a veces, su día.


20

Para el beneficio de cualquier visitante futuro que haya perdido mis comentarios:

br {
    border-bottom:1px dashed black;
}

No funciona.

Ha sido probado en IE 6, 7 y 8, Firefox 2, 3 y 3.5B4, Safari 3 y 4 para Windows, Opera 9.6 y 10 (alfa) y Google Chrome (versión 2) y no funcionó en ninguno de ellos. Si en algún momento en el futuro alguien encuentra un navegador que admite un borde en un<br> elemento, no dude en actualizar esta lista.

También tenga en cuenta que probé una serie de otras cosas:

br {
    border-bottom:1px dashed black;
    display:block;
}

br:before { /* and :after */
    border-bottom:1px dashed black;
    /* content and display added as per porneL's comment */
    content: "";
    display: block;
}

br { /* and :before and :after */
    content: url(a_dashed_line_image);
}

De ellos, lo siguiente funciona en Opera 9.6 y 10 (alfa) (¡gracias porneL!):

br:after {
    border-bottom:1px dashed black;
    content: "";
    display: block;
}

No es muy útil cuando solo se admite en un navegador, pero siempre me parece interesante ver cómo diferentes navegadores implementan la especificación.


3
: antes no existe sin contenido. Añadir content:""; display:blocka la segunda regla.
Kornel

10

Sé que no puedes editar el HTML, pero si puedes modificar el CSS, ¿puedes agregar JavaScript?

si es así, puede incluir jquery, entonces podría hacer

<script language="javascript">
$(document).ready(function() {
    $('br').append('<span class="myclass"></span>');
});
</script>

1
Quiere decir $ ('br'). Before ('<span class = "myclass"> </span>');
molokoloco

10
br { padding: 1px 8px; border-bottom: 1px dashed #000 }

Sin embargo, no se usa mucho en un solo navegador.

Captura de pantalla de IE 8

(Nota: estoy usando IE 8.0.7100 (en Win7 RC) si eso hace alguna diferencia)

También,

br:after { content: "..." }  
br { content: "" }`

o,

br:after {
    border: 1px none black;
    border-bottom-style: dashed;
    content: "";
    padding: 0 6px 0;
}

br { content: "" }

da una línea discontinua en Chrome 2 / Safari 4b pero pierde el salto de línea que (a menos que alguien pueda encontrar una forma de reintroducir eso) lo hace menos inútil.

por ejemplo ,
prueba de IE8 , prueba de Chrome / Safari y otra


Eso es interesante. No puedo reproducir eso bajo IE8. ¿Puedes poner un ejemplo en línea que se vea en tu IE8 como tu imagen incrustada?
viam0Zah

Enlaces agregados: Win7 utiliza una versión ligeramente diferente de IE8 en caso de que haga alguna diferencia.
pelms

1
@pelms Gracias, revisé la página de prueba de IE con IENetRenderer y realmente muestra el borde debajo BR. Gracias, actualicé mi respuesta con los resultados de sus pruebas.
viam0Zah

2

Mis propias pruebas muestran de manera concluyente que a las bretiquetas no les gusta ser objetivo de CSS.

Pero si puede agregar estilo, ¿entonces probablemente también pueda agregar una etiqueta de scrip al encabezado de la página? Enlace a un externo .jsque hace algo como esto:

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

En resumen, no es óptimo, pero aquí está mi solución.


"No puedo cambiar el html desafortunadamente", escribió dc3.
viam0Zah

2
@ Török: La respuesta que publiqué no es solo para el OP, sino para todos los que alguna vez encuentran esta página con una pregunta similar.
Kris

2

Esto parece resolver el problema:

<!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>

1

BR es un elemento en línea, no un elemento de bloque.

Así que tú necesitas:

 br.Underline{
    border-bottom:1px dashed black;
    display: block;
  }

De lo contrario, los navegadores que son un poco más exigentes con estas cosas se negarán a aplicar bordes a los elementos BR, ya que los elementos en línea no tienen bordes, relleno o márgenes.


Los elementos en línea no tienen bordes, rellenos y márgenes - sólo se comportan de otra manera.
viam0Zah

Estoy probando cosas en Fx con Firebug. También lo intenté pero no funcionó para mí. Noto que la barra diagonal en la etiqueta de salto de línea no está flotando (si esa es la terminología correcta), es decir ... no hay espacio entre el br y el /. ¿Es esto un factor? Pensé que tenía que haber un espacio. Edité el html de todos modos en firebug para arreglar esto y aún nada. de todos modos, gracias por toda la ayuda de la gente, nunca he usado este sitio antes y estoy muy sorprendido de lo rápido que obtuve una respuesta. Excelente comunidad que tienes aquí.
dc3

2
@richard: ¿Realmente has probado esto, si es así, qué navegador (es)? Lo probé en IE 6, 7 y 8, Firefox 2, 3 y 3.5B4, Safari 3 y 4 para Windows, Opera 9.6 y 10 (beta) y Google Chrome (versión 1) y no funcionó en ninguno de ellos .
Grant Wagner

1

ACTUALIZADO 13/09/2019:

El propósito de diseñar la <br>etiqueta de esta manera es hacer un salto de línea "más grande" (es decir, con un poco de espacio extra entre las líneas).

La clase "oldbig" (a continuación) se probó y funcionó correctamente en Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 e IE 11.48.17134.0, para darle estilo. Desafortunadamente, se rompió en Chrome versión 76 y sus derivados (alrededor de agosto de 2019). El síntoma es que ya no se muestra el espacio extra entre líneas.

La clase "newbig" se ha probado y funciona correctamente en las versiones actuales de Chrome (76.0.3809.132), Opera, Firefox, Edge, IE, Brave y Palemoon:

br.oldbig {line-height:190%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}

Aquí hay una demostración:

br.oldbig {line-height:175%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}
<p style="max-width:20em">This is a paragraph which demonstrates the difference 
 between a line-break which occurs when the text exceeds the max-width, and a 
 line-break forced by a &lt;br&gt; tag here:<br>
 and a line break forced by a &lt;br class=oldbig&gt; tag here:<br class=oldbig>
 and a line break forced by a &lt;br class=newbig&gt; tag here:<br class=newbig>
 This is the next line after the &lt;br class=newbig&gt; tag (but still 
 part of the same paragraph).</p>
<p style="max-width:20em">And this is another paragraph, entirely.</p>

Este es el resultado, que se muestra en Chrome v.76:

captura de pantalla


0

Esto funcionará, pero solo en IE. Lo probé en IE8.

br {

  border-bottom: 1px dashed #000000;
  background-color: #ffffff;
  display: block;
  }

0

Coloqué una <br>etiqueta en una <span>etiqueta y era capaz de usar display:none;en el <span>que el control cuando no utilizar la <br>etiqueta usando Consultas de medios.


¿Por qué no solo apuntar <br>directamente en lugar de envolverlo en un lapso?
Gavin

0

vieja pregunta, pero esta es una solución bastante ordenada y limpia, podría usarse para personas que todavía se preguntan si es posible :):

br{
    content: '.';
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed black;
}

con esta solución, también puede eliminar BRs en sitios web (solo configure el ancho en 0px)


-2

¿Por qué no solo usar la etiqueta HR? Está hecho exactamente para lo que quieres. Es como intentar hacer un tenedor para comer sopa cuando hay una cuchara justo en frente de ti en la mesa.


no funciona para todos los casos de uso porque hr es un elemento de bloque - por lo tanto, el estilo es limitado
Thariama

1
Aparentemente quiere usar claro: todos, vea la excelente respuesta de Gabor. Entonces, la metáfora de tu tenedor no tiene ningún sentido.
eddy147
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.