¿Cómo romper la línea sin usar la etiqueta <br> en HTML/CSS?

Use elementos a nivel de bloque para romper la línea sin usar la etiqueta <br>. Hay muchas formas de romper la línea sin usar la etiqueta <br>.
Las propiedades utilizadas se enumeran a continuación:

  • espacio en blanco: pre; Se utiliza para hacer que los elementos actúen como la etiqueta <pre>.
  • bloqueo de pantalla; Establece la propiedad de visualización de los elementos para bloquear.

Ejemplo 1: Este ejemplo usa espacios en blanco para pre romper la línea.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Line break withoutusing br tag
    </title> 
</head> 
  
<body style = "text-align:center;"> 
  
    <h1 style = "color:green;" > 
        GeeksForGeeks 
    </h1> 
      
    <div style="white-space: pre">
        GeeksforGeeks
        GeeksforGeeks
    </div>
</body> 
  
</html>                    

Producción:

Ejemplo 2: este ejemplo utiliza la propiedad de visualización para dividir la línea.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Line break using display property
    </title> 
   
    <style>
        p span {
            display: block;
        }
    </style>
</head>
  
<body style = "text-align:center;"> 
  
    <h1 style = "color:green;" > 
        GeeksForGeeks 
    </h1> 
          
    <p>
        <span>GeeksforGeeks_1</span>
        <span>GeeksforGeeks_2</span>
    </p>
</body> 
  
</html>                    

Producción:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *