html - linea - ¿Cómo cambiar la altura de un<br>?
salto de linea css (30)
Tengo un gran párrafo de texto que está dividido en subpárrafos con el de ''s:
<p>
Blah blah blah.
<br/>
Blah blah blah. Blah blah blah. Blah blah blah.
<br/>
Blah blah blah.
</p>
Quiero ampliar la brecha entre estos subpárrafos, ya que hay dos <br> o algo así. Sé que la forma correcta de hacer esto es usar <p></p> , pero en este momento no puedo cambiar este diseño, por lo que estoy buscando una solución solo para CSS.
He intentado configurar la line-height y la line-height <br> con display: block , I googled y Stack Overflow-ed brevemente, pero no encontré ninguna solución. ¿Es esto posible sin cambiar el diseño?
Acabo de tener este problema y lo resolví usando
<div style="line-height:150%;">
<br>
</div>
Aquí está la solución correcta que realmente tiene soporte para varios navegadores:
br {
line-height: 150%;
}
Aquí hay una solución que funciona en IE, Firefox y Chrome. La idea es aumentar el tamaño de fuente del elemento br desde el tamaño del cuerpo de 14px a 18px, y bajar el elemento en 4px para que el tamaño adicional esté debajo de la línea de texto. El resultado es 4px de espacios en blanco adicionales debajo de la br.
br
{
font-size: 18px;
vertical-align: -4px;
}
Conseguí que funcionara en IE7 usando una combinación de soluciones, pero principalmente envolviendo el Br en DIV como sugirieron Nigel y otros. Se agregó Id y se ejecuta en = "servidor" para que pueda eliminar la BR al eliminar la casilla de verificación de la fila de casillas de verificación.
.narrow {
display: block;
margin: 0px;
line-height: 0px;
content: " ";
}
<div class="narrow" run at="server"><br></br></div>
Css:
br {
display: block;
margin: 10px 0;
}
La solución probablemente no sea compatible con varios navegadores, pero al menos es algo. También considere establecer line-height :
line-height:22px;
Para Google Chrome, consider configurar el content :
content: " ";
Aparte de eso, creo que estás atrapado con una solución de JavaScript.
Curiosamente, si la etiqueta de ruptura se escribe en forma completa de la siguiente manera:
<br></br>
entonces la altura de línea CSS: 145% funciona. Si la etiqueta de rotura se escribe como:
<br> or
<br/>
entonces no funciona, al menos en Chrome, IE y Firefox. ¡Extraño!
Entonces, los que están arriba tienen básicamente una respuesta similar, pero aquí es muy sucinta. Funciona en Opera, Chrome, Safari y Firefox, probablemente también en IE?
br {
display: block; /* makes it have a width */
content: ""; /* clears default height */
margin-top: 0; /* change this to whatever height you want it */
}
Esto me sirvió cuando no conseguí que el espacio entre estilos funcionara con la etiqueta span:
<p style=''margin-bottom: 5px'' >
<span>I Agree</span>
</p>
<span>I Don''t Agree</span>
Intente usar el atributo de line-height CSS en su etiqueta p que contiene la etiqueta br . Recuerde que puede id sus etiquetas p si desea aislarlas, aunque podría ser mejor usar un div para aislamiento, OMI.
Lo que funciona para mí es agregar esta línea entre las etiquetas de párrafo ... aunque no es la mejor solución.
<br style="line-height:32px">
-------- Editar ---------
Me topé con problemas con PC / Mac con esto ... Le da al texto la nueva altura de línea, pero no hace el salto de línea ... Es posible que desee hacer algunas pruebas usted mismo. ¡Lo siento!
Lo siento si alguien más ya dijo esto, pero la solución simple es jugar con tu "altura de línea". Si está obteniendo demasiado espacio cuando utiliza un salto de línea, es simplemente porque tiene la altura de la línea demasiado alta. Puede corregir esto en CSS (pero sabe que afectará a todo lo que use esa propiedad) o puede hacer un estilo en línea para anular el CSS.
Michael y Yoda tienen razón. Lo que puedes hacer es usar la etiqueta <p> , que, al ser una etiqueta de bloque, usa un margen inferior para compensar el siguiente bloque, por lo que puedes hacer algo similar para obtener un mayor espaciado:
<p>
A block of text.
</p>
<p>
Another block
</p>
Otra alternativa es usar la etiqueta de bloque <hr> , con la que puede definir explícitamente la altura del espaciado.
Otra forma es usar un HR . Pero, y aquí está la parte astuta, hazla invisible.
Así:
<hr style="height:30pt; visibility:hidden;" />
Para hacer una ruptura de BR más limpia simulada utilizando el HR: Btw funciona en todos los navegadores !!
{ height:2px; visibility:hidden; margin-bottom:-1px; }
Parece que no puede ajustar la altura de un BR, pero puede hacer que desaparezca de manera confiable usando la pantalla: ninguna
Encontré esta página mientras buscaba una solución para lo siguiente:
Tengo una situación en la que la pasarela de pago de terceros (Worldpay) solo le permite personalizar sus páginas de pago con un máximo de 10k de CSS y HTML (no se permiten secuencias de comandos) que se inyectan en el cuerpo de su plantilla, y después de algunos BR''s, etiquetas FONT, etc. ¡Junto con su DTD que fuerza a IE7 / 8 en modo Quirks, esto hace que la personalización entre navegadores sea tan difícil como es!
Apagar los BR hace que las cosas sean mucho más consistentes ...
Por lo que sé, <br> no tiene una altura, simplemente obliga a un salto de línea. Lo que tiene es un texto con algunos saltos de línea además de los de ajuste automático, no subpárrafos. Puede cambiar el interlineado, pero eso afectará a todas las líneas.
Puede estar utilizando dos etiquetas br es la solución más sencilla que funciona con todos los navegadores. Pero es repetitivo.
<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>
Responda en un nivel más general para cualquier persona que aterrizó aquí, ya que están solucionando problemas en el espaciado causado por la etiqueta <br> . Tengo que hacer muchos reinicios para acercarme al píxel perfecto.
br {
content: " ";
display: block;
}
Para el problema específico que estaba abordando, tuve que tener un espacio específico entre las líneas. Agregué un margen en la parte superior e inferior.
br {
content: " ";
display: block;
margin: 0.25em 0;
}
Si el propósito es agregar un poco de espacio vertical adicional después de la etiqueta <br> , sin romper el párrafo lógico, algo así hará el truco. Funciona bien en todos los navegadores:
<span style="vertical-align:-37%"> </span><br>
Aquí hay una página de demostración que incluye algunas otras variaciones sobre el tema:
http://www.burtonsys.com/a_little_extra_vertical_space_for_br_tag.html
También puede usar la propiedad "cotización en bloque" en CSS. Eso lo haría para que no afecte sus líneas individuales, pero le permite establecer parámetros para los saltos entre párrafos o "comillas en bloque".
ACTUALIZAR:
Me quedo corregido. "blockquote" es en realidad una propiedad html. Lo usas como <p> y </ p> en tu trabajo. A continuación, puede establecer los parámetros para su cotización de bloque en css como
blockquote { margin-top: 20px }
Espero que esto ayude. Es similar a establecer los parámetros en el br y puede o no ser compatible con todos los navegadores.
Tuve que desarrollar una solución para convertir HTML a PDF y centrar verticalmente el texto en las celdas de la tabla, pero nada funcionó excepto ingresar el plano.
Así que, pensando fuera de la caja, he cambiado el tamaño vertical ajustando el tamaño de fuente (en pt).
<font style="font-size: 4pt"><br></font>
Tuve un pensamiento que podrías usar:
br:after {
content: ".";
visibility: hidden;
display: block;
}
Pero eso no funcionó en Chrome o Firefox.
Solo pensé que lo mencionaría en caso de que se lo ocurriera a alguien más y les ahorraría el problema.
Usa <div>
<div>Content 1</div>Content 2
Esto permite una nueva línea sin ningún espacio vertical.
Esto se convierte en
<div>Content 1</div>Content 2
Utilizo estos métodos, pero no sé si el navegador cruzado
================= Método 1 ==================
br {
display:none;
}
O
================= Método 2 ==================
br {
display: block;
margin-bottom: 2px;
font-size:2px;
line-height: 2px;
}
br:before {
display: block;
margin-top: 2px;
content: "";
}
br:after {
content: ".";
visibility: hidden;
display: block;
}
O
================= Método 3 ==================
br:after { content: "" }
br { content: "" }
Y recuerde que (mal) usar la etiqueta <hr> como se sugiere en alguna parte, terminará la etiqueta <p> , así que olvídese de esa solución.
Si f.ex. algo está estilizado en el entorno <p> , ese estilo desaparece para el resto del contenido después de insertar <hr> .
puede aplicar la altura de línea en ese elemento <p> , por lo que las líneas se vuelven más grandes.
<br /> ocupará tanto espacio como la fila llena de texto de su <p> , no puede cambiar eso. Si desea un tamaño más grande, significa que desea separarse en un párrafo, así que agregue otra <p> . No olvides ser lo más semántico que puedas;)
<br> es para un salto de línea.
<br /> también es para salto de línea, la "/" opcionalmente necesaria para elementos vacíos o para xhtml.
Al utilizar <br></br> , los navegadores insertarán dos saltos de línea, ya que ambos son "virtualmente" iguales.
No hay manera de aumentar el tamaño de un salto de línea porque es solo un salto de línea.
Use un div con la configuración de vilibility en oculto ( <div style="vilibility:hidden; line-height:150%;"</div> ) o mejor aún, un párrafo.
<span style="line-height:40px;"><br></span>
Tendrías que hacer esto en línea y en cada
Elemento, pero debería funcionar en la mayoría de los navegadores Fiddle con la altura de la línea para obtener el efecto deseado. Si lo hace en línea en cada elemento, debería funcionar en la mayoría de los navegadores y correos electrónicos (pero esto es demasiado complejo para discutirlo aquí).
br {
content: "";
margin: 2em;
display: block;
margin-bottom: -20px;
}
Funciona en Firefox, Chrome y Safari. No he probado en el Explorador. (Windows-tablet está fuera del poder.)
Los saltos de línea y el tamaño de fuente funcionan de manera diferente en Firefox y Safari.