En este artículo, veremos cómo definir la propiedad de separación de palabras para permitir que las palabras continúen en la siguiente línea en CSS. Puede usar el valor de la propiedad break-all y break-word para definir la propiedad word-break que se usa para especificar cómo dividir la palabra cuando la palabra llega al final de la línea.
Sintaxis:
word-break: break-all | break-word;
El valor de la propiedad:
- break-all: se utiliza para dividir las palabras en cualquier carácter para evitar el desbordamiento.
- break-word: se utiliza para dividir las palabras en puntos arbitrarios para evitar el desbordamiento.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
.gfg {
width: 140px;
border: 1px solid #CCFF00;
word-break: break-all;
}
</style>
</head>
<body>
<center>
<h1>Welcome to GeeksforGeeks </h1>
<h2>word-break: break-all;</h2>
<p class="gfg">
GeeksforGeeksGeeksGeeks. A computer
science portal for geeks.
</p>
</center>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
.gfg {
width: 140px;
border: 3px double green;
word-break: break-word;
}
</style>
</head>
<body>
<center>
<h1>Welcome to GeeksforGeeks </h1>
<h2>word-break: break-word;</h2>
<p class="gfg">
GeeksforGeeksGeeksGeeks. A computer
science portal for geeks.
</p>
</center>
</body>
</html>
Producción:
Ejemplo 3: En este ejemplo, usaremos la propiedad overflow-wrap .
Sintaxis:
overflow-wrap: break-word;
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
.gfg {
width: 140px;
border: 3px double green;
overflow-wrap: break-word;
}
</style>
</head>
<body>
<center>
<h1>Welcome to GeeksforGeeks </h1>
<h2>overflow-wrap</h2>
<p class="gfg">
GeeksforGeeksGeeksGeeks. A computer
science portal for geeks.
</p>
</center>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA