La propiedad de guiones en CSS nos dice cómo se deben dividir las palabras con guiones para crear oportunidades de envoltura suave dentro de las palabras.
Sintaxis:
hyphens: none|manual|auto|initial|inherit;
Valor por defecto:
- manual
Valores de propiedad:
- ninguno: esta propiedad significa que las palabras no se dividen con guión.
- manual: este es el valor de propiedad predeterminado. Significa que las palabras solo se separan con guión cuando los caracteres dentro de la palabra sugieren oportunidades de separación.
- auto: esta propiedad permite que el algoritmo divida las palabras en los puntos de separación de palabras apropiados.
- initial: el valor de propiedad inicial establece la propiedad en su valor predeterminado.
- heredar: hereda la propiedad de su elemento padre.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | hyphens Property
</title>
<style>
body {
text-align: left;
}
h1 {
color: green;
}
div {
width: 50px;
border: 2px solid blue;
background-color: pink;
}
div.a {
<!-- none: words are not hyphend -->
hyphens: none;
}
div.b {
<!-- manual: hyphenated when
the characters suggest -->
hyphens: manual;
}
div.c {
<!-- auto: break the words at
appropriate hyphenation points -->
hyphens: auto;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>The hyphens Property</h2>
<h3>hyphens: none</h3>
<p>No hyphens</p>
<div class="a">
The words are not hyphenated
</div>
<h3>hyphens: manual</h3>
<p>Hyphens only if needed.</p>
<div class="b">
It is the default prop-erty value.
</div>
<h3>hyphens: auto</h3>
<div class="c">
Hyph-ens where the algor-ithm decides if needed.
</div>
</body>
</html>
Producción:
Ejemplo-2:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | hyphens Property
</title>
<style>
body {
text-align: left;
}
h1 {
color: green;
}
div {
width: 44px;
border: 1.5px solid red;
background-color: orange;
}
div.a {
hyphens: none;
}
div.b {
hyphens: manual;
}
div.c {
hyphens: auto;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>The hyphens Property</h2>
<h3>hyphens: none</h3>
<div class="a">GeeksforGeeks</div>
<h3>hyphens: manual</h3>
<div class="b">Geeks-for-Geeks</div>
<h3>hyphens: auto</h3>
<div class="c">Geeks-forGe-eks</div>
</body>
</html>
Producción:
Navegadores compatibles: El navegador compatible con CSS | guiones Las propiedades se enumeran a continuación:
- Google cromo 13
- Borde 79
- Internet Explorer 10.0
- MozillaFirefox 43.0
- Ópera 44.0
- Safari 5.1
Publicación traducida automáticamente
Artículo escrito por apeksharustagi1998 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA