En este artículo, aprenderemos cómo dividir una línea de cualquier declaración usando las propiedades de CSS. Debe conocer la etiqueta <br> que se usa en HTML para romper la línea. Pero en este artículo, usaremos solo CSS para realizar esta tarea.
salto de palabra CSS usedwordline word wrap usedbreakwordswrapline overflow wrap CSS
.word {
width: 200px;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
En este CSS, debemos especificar un ancho desde donde debe comenzar el salto de línea. En el código anterior, el salto de línea comenzará después de alcanzar un ancho de 200 px.
Ejemplo 1: cuando el ancho es 200px
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
.word {
width: 200px;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
</style>
</head>
<body>
<p class="word">
GATE(Graduate Aptitude in Engineering)
is one the most important and in-demand
entrance exam for engineering graduates
in our country. Geeksforgeeks is here
to guide you through the GATE Computer
Science Engineering preparation.
Geeksforgeeks brings you the Complete
GATE preparation course GATE-CS Test
Series 2022, which will help the GATE
aspirants to boost their GATE score
and AIR.An extensive Online Test Series
for GATE CSE to boost your preparation.
Test series is designed considering the
pattern of previous years GATE papers
and ensures to resemble with the
standard of GATE 2022 exam.
</p>
</body>
</html>
Salida: En este ejemplo, hay un salto de línea después de 200px.
Ejemplo 2: cuando el ancho es 500px
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<style>
.word {
width: 500px;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
</style>
</head>
<body>
<p class="word">
GATE(Graduate Aptitude in Engineering)
is one the most important and in-demand
entrance exam for engineering graduates
in our country. Geeksforgeeks is here
to guide you through the GATE Computer
Science Engineering preparation.
Geeksforgeeks brings you the Complete
GATE preparation course GATE-CS Test
Series 2022, which will help the GATE
aspirants to boost their GATE score
and AIR.An extensive Online Test Series
for GATE CSE to boost your preparation.
Test series is designed considering the
pattern of previous years GATE papers
and ensures to resemble with the
standard of GATE 2022 exam.
</p>
</body>
</html>
Salida: En este ejemplo, hay un salto de línea después de 500 px.
