Cómo insertar un salto de línea antes de un elemento usando CSS

170

Siento que vi una manera, usando la propiedad de contenido CSS, para insertar una etiqueta de salto de línea antes de un elemento. Obviamente esto no funciona:

#restart:before { content: '<br/>'; }

¿Pero cómo haces esto?

css

— mheavers
fuente

2

CSS no es para agregar o editar contenido, es para controlar cómo se muestra el contenido.

— Todd Moses

40

Me parece que el diseño y el flujo (podrían considerarse los saltos de línea) están definitivamente dentro del dominio de CSS.

— Trevor

12

CSS es absolutamente para agregar o editar contenido cuando es un elemento de estilo consistente que es parte de su tema. Especialmente con sistemas de gestión de contenido como Wordpress que no le permiten editar su contenido, es muy útil. Por eso existe la propiedad "contenido". Para agregar y / o editar contenido.

— Fei Lauren

266

Es posible usar la \A secuencia de escape en el contenido generado por el elemento psuedo. Lea más en la especificación CSS2.

#restart:before { content: '\A'; }

También es posible que deba agregar white-space:pre;a #restart.

nota: \Adenota el final de una línea.

ps Otro tratamiento para ser

:before { content: ' '; display: block; }

— bookcasey
fuente

11

Pruebe también con espacios en blanco: preenvoltura; si quieres que tu texto se ajuste

— Jazzy

66

Brillante. Sin embargo, debe tenerse en cuenta que para que esto funcione, #restarttambién debe serlodisplay: inline;

— Troy Alford

23

Esto no funcionó para mí, solía usarlo :before { content: ' '; display: block; }.

— Bogdanio

1

Por alguna razón, ninguna de las soluciones funciona con inline-blockelementos. Simplemente no irán a la siguiente línea. La única solución era agregar realmente un vacío <div></div>en el HTML.

— Adam Reis

2

Si la línea no se rompió, puede usar la propiedad 'espacio en blanco': antes de {content: '\ A'; espacio en blanco: pre; }

— Amr

35

Si #restartes un elemento en línea (por ejemplo <span>, <em>etc.), puede convertirlo en un elemento de bloque usando:

#restart { display: block; }

Esto tendrá el efecto de garantizar un salto de línea tanto antes como después del elemento.

No hay forma de que CSS inserte algo que actúe como un salto de línea solo antes de un elemento y no después. Tal vez podría causar un salto de línea antes como efecto secundario de otros cambios, por ejemplo float: left, o clear: leftdespués de un elemento flotante, o incluso algo loco, #restart:before { content: 'a load of non-breaking spaces'; }pero probablemente no sea una buena idea en el caso general.

— bobince
fuente

1

No se puede mostrar: bloque, porque entonces necesitaría mostrar un ancho para el elemento para evitar que su fondo se ejecute en toda la página. Necesita poder configurar automáticamente el ancho del elemento.

— mheavers

3

Un float: leftelemento puede ser útil, ya que se ajustan y comienzan en una nueva línea. De lo contrario, lo que desea puede no ser posible.

— bobince

porque los desarrolladores a veces trabajan en un gran proyecto donde no tienen control o no pueden tomar la decisión de aplicar otra solución.

— eyurdakul

19

Esto funciona para mi:

#restart:before {
    content: ' ';
    clear: right;
    display: block;
}

— hutorny
fuente

Por alguna razón, los diversos caracteres Unicode para la nueva línea no funcionaban para mí ... Sin embargo, esta solución funcionó, ¡gracias!

— Gene Bo

1

Sí, pero ¿qué sucede cuando tienes que poner texto dentro del contenido también? respuesta

— Sándor Zuboly 01 de

12

Simplemente coloque un carácter de nueva línea Unicode dentro del pseudo elemento anterior:

#restart:before { content: '\00000A'; }

— Jesse Kinsman
fuente

11

El siguiente CSS funcionó para mí:

/* newline before element */
#myelementId:before{
    content:"\a";
    white-space: pre;
}

— rluks
fuente

Excelente idea con CSS simple

— NaveenDA

Funcionó como un encanto para mí. Estoy usando esto:content: 'bar: \a' attr(data-description);

— Jimmy Adaro

Esta es la respuesta correcta 👍

— cronoklee

10

Hay dos razones por las que no puede agregar contenido generado a través de CSS de la manera que desee:

el contenido generado acepta contenido y no marcado. El marcado no se evaluará sino que solo se mostrará.
:beforey el :aftercontenido generado se agrega dentro del elemento, por lo que incluso agregar un espacio o letra y definirlo como blockno funcionará.

Hay un ::outsidepseudo elemento que puede hacer lo que quieras. Sin embargo, parece que no hay soporte para el navegador. (Lea más aquí: http://www.w3.org/TR/css3-content/#wrapping )

La mejor apuesta es usar un poco de jQuery aquí:

$('<br />').insertBefore('#restart');

Ejemplo: http://jsfiddle.net/jasongennaro/sJGH9/1/

— Jason Gennaro
fuente

"Usando CSS". Encontré una respuesta similar a la trabajada de Jesse Kinsman.

— RonnyKnoxville

4

Sí, totalmente factible, pero definitivamente es un truco total (las personas pueden parecer sucias para escribir dicho código).

Aquí está el HTML:

<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>

Aquí está el CSS:

#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }

Aquí está el violín: http://jsfiddle.net/AprNY/

— hammerbrostime
fuente

+1 Para la creatividad. Tengo algo que incluyo de una fuente externa y no puedo alterar el HTML real ... esto parece funcionar bien :) ¡Gracias!

— contrarrestar el

3

Intenta lo siguiente:

#restart::before {
  content: '';
  display: block;
}

— usuario
fuente

Un consejo: agregue al menos un comentario de una sola línea, para que sus publicaciones no terminen en el VLQQ de forma predeterminada.

— Deduplicador el

1

suponiendo que desea que la altura de la línea sea de 20 px

  .restart:before { 
     content: 'First Line';
     padding-bottom:20px;
  }
  .restart:after { 
    content: 'Second-line';
    position:absolute;
    top:40px;
  }

— Kareem
fuente

1

No tuve suerte en absoluto al insertar un descanso con: antes. Mi solución fue agregar un lapso con una clase y poner el descanso dentro del lapso. Luego cambie la clase a mostrar: ninguna; o pantalla: bloquear según sea necesario.

HTML

    <div>
         <span class="ItmQty"><br /></span>
         <span class="otherclass">
              <asp:Label ID="QuantityLabel" runat="server" Text="Qty: ">      
              </asp:Label>
         </span>
         <div class="cartqty">
              <asp:TextBox ID="QuantityTextBox" runat="server" Text='<%# Bind("Quantity","{0:#}") %>' Width="50"></asp:TextBox>

         </div>
    </div>

CSS

@media only screen and (min-width: 854px)
{
    .ProjItmQty
    {
        display: block;
        clear: both;
    }
}
@media only screen and (min-width: 1003px)
{
    .ProjItmQty
    {
        display: none;
    }
}

Espero que esto ayude.

— Roger
fuente

1

Puede llenar su documento con <br>etiquetas y activarlas / desactivarlas con CSS como cualquier otra:

<style>
.hideBreaks {
 display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>

— Martillo neumático
fuente

0

También puede usar la entidad HTML precodificada para un salto de línea 
en su contenido y tendrá el mismo efecto.

— Henry Gibson
fuente

0

body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }

https://www.w3.org/TR/CSS2/generate.html#x18 The Content Proerty, "newlines" ... p no agregará margen ni relleno al final de p dentro del bloque padre (por ejemplo, cuerpo ›sección› pags). El salto de línea "\ A" fuerza el espacio de línea, altura de línea de estilo equivalente.

— Mark Stewart
fuente

-1

Añadir un margin-top:20px;a #restart. O cualquier diferencia de tamaño que considere apropiada. Si es un elemento en línea, tendrá que agregarlo display:blocko, display:inline-blockaunque no creo que inline-blockfuncione en versiones anteriores de IE.

— punkrockbuddyholly
fuente

No, el problema es que el tipo de visualización del elemento es bloque en línea, por lo que necesito tener un descanso antes del elemento.

— mheavers

el tipo de visualización ya está bloqueado en línea. Estoy tratando de hacer lo que pedí anteriormente, usando la propiedad de contenido.

— mheavers

No puede agregar elementos html utilizando la propiedad de contenido, no es posible.

— punkrockbuddyholly

porque tu respuesta no habría resuelto su problema. Mire la respuesta ganadora que detalla una forma de proporcionar un salto de línea utilizando la propiedad de contenido (que no aceptará elementos html). Quizás fue un malentendido de la pregunta original.

— pdwalker

-1

En lugar de agregar manualmente un salto de línea de alguna manera, puede implementar un implemento border-bottom: 1px solid #ff0000que tomará el borde del elemento y solo se representará border-<side>del lado que especifique.

— andy4thehuynh
fuente

2

OP solicitó el equivalente de <br>, no <hr>.

— Beni Cherniavsky-Paskin