Cómo Hacer Un Salto De Línea En Javascript

| | | |

Se puede agregar un salto de lìnea a los elementos HTML sin tener que utilizar un "br" de retorno de salto mediante el uso de pseudoelementos. Los pseudoelementos se utilizan para dise√±ar una parte especìfica de un elemento. Aquì usaremos:: after para dise√±ar un elemento HTML para agregar un salto de lìnea. & Nbsp;

En el còdigo anterior, usamos el pseudo-elemento :: después de en cada elemento en lìnea (representado por el intervalo) para agregar un retorno de carro (representado por la " a ") después de la lìnea de texto del intervalo. El :: after en este caso tiene una propiedad de contenido y una propiedad de espacio en blanco disponibles para que las usemos. & Nbsp;

El " content " La propiedad describe las cosas que queremos inyectar en el tramo. La propiedad del espacio en blanco nos dice si debemos preservar el espacio en blanco. Dejar esta propiedad en particular no interfiere con la caracterìstica de bloque en lìnea del tramo. Asì que tenemos que agregar esta propiedad en particular para anular eso. & Nbsp;

A medida que se mete con el estilo y el dise√±o cada vez más, probablemente encontrará que la soluciòn anterior no es necesariamente la mejor soluciòn. Si agrega relleno de cualquier tipo y también fondo, verá que esas propiedades CSS tienden a interferir en el lugar donde entra en juego el fondo. Vea el ejemplo de còdigo a continuaciòn que ilustra el punto:

Hay otras soluciones que ofrecen resultados similares a este & ndash; donde el fondo comienza en la lìnea anterior y luego hace un retorno de carro con texto en el fondo correcto en la lìnea siguiente. La propiedad CSS box decoration break: clone es una que me viene a la mente y que se puede agregar a la clase span anterior para lograr un resultado similar, pero en realidad no nos da el resultado que queremos. & Nbsp;

Usar elementos a nivel de bloque como "p" o "div" es una soluciòn tentadora. Pero ¿qué pasa con los tiempos ¿dònde le gustarìa usar un valor de visualizaciòn diferente? Esto nos lleva a la opciòn de dise√±o de tabla. & nbsp;

En el editor de còdigo, en el selector de CSS de span, elimine las propiedades allì y reemplácelas con display: table. Usar esto no solo hace que su còdigo sea más limpio, sino que le brinda exactamente el dise√±o que necesita para mostrar la informaciòn. No estamos usando el dise√±o de la tabla en el sentido tradicional, pero nos da exactamente lo que necesitamos para obtener el trabajo hecho.