Esta propiedad de separación de palabras se utiliza para especificar cómo dividir la palabra cuando llega al final de la línea. Los saltos de línea en el texto pueden ocurrir en ciertos espacios, como cuando hay un espacio o un guión.
Sintaxis:
word-break: normal|break-all|keep-all|break-word|initial|inherit;
Valor predeterminado: Normal
Propiedades: hay propiedades de separación de palabras que se detallan a continuación:
- normal
- Romper todo
- Mantener todo
- inicial
- heredar
normal: esta propiedad utiliza las reglas de salto de línea predeterminadas.
Sintaxis:
word-break: normal (default value)
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | word-break Property
</title>
<style>
p {
width: 140px;
border: 1px solid #000000;
}
gfg.a {
word-break: normal;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>word-break: normal (default):</h2>
<p class="gfg">GeeksforGeeksGeeksGeeks.
A computer science portal for geeks .</p>
</center>
</body>
</html>
Producción:
break-all: se utiliza para dividir las palabras en cualquier carácter para evitar el desbordamiento.
Sintaxis:
break-word: break-all
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | word-break Property
</title>
<style>
p {
width: 142px;
border: 1px solid #000000;
}
p.gfg {
word-break: break-all;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h2>word-break: break-all;</h2>
<p class="gfg">GeeksforGeeksGeeksGeeks. A
computer science portal for geeks .</p>
</center>
</body>
</html>
Producción:
Keep-all: Es lo mismo que el valor normal.
Nota: No debe usarse para texto en chino/japonés/coreano.
Sintaxis:
word-break: Keep-all;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | word-break Property
</title>
<style>
p {
width: 140px;
border: 1px solid #000000;
color:black;
}
p.gfg {
word-break: keep-all;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>word-break: Keep-all</h2>
<p class="gfg">GeeksforGeeksGeeksGeeks.A
computer science portal for geeks .</p>
</center>
</body>
</html>
Producción:
break-word: se utiliza para dividir las palabras en puntos arbitrarios para evitar el desbordamiento.
Sintaxis:
word-break: break-word;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | word-break Property
</title>
<style>
p {
width: 140px;
border: 1px solid #000000;
color:black;
}
p.gfg {
word-break: break-word;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>word-break: break-word</h2>
<p class="gfg">GeeksforGeeksGeeksGeeks.A
computer science portal for geeks .</p>
</center>
</body>
</html>
Producción:
initial: Establece la propiedad a su valor por defecto.
Sintaxis:
word-break:initial;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | word-break Property
</title>
<style>
p {
width: 140px;
border: 1px solid #000000;
color:black;
}
p.gfg {
word-break:initial;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>word-break:initial;</h2>
<p class="gfg">GeeksforGeeksGeeksGeeks.A
computer science portal for geeks.</p>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con Word-break Property se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA