Una propiedad de desbordamiento de texto en CSS se usa para especificar que parte del texto se ha desbordado y se ha ocultado a la vista. La propiedad de espacio en blanco debe establecerse en nowrap y la propiedad de desbordamiento debe establecerse en hidden . El contenido desbordado se puede recortar, mostrar puntos suspensivos (‘…’) o mostrar una string personalizada.
Sintaxis:
text-overflow: clip|string|ellipsis|initial|inherit;
Valores de propiedad: todas las propiedades se describen bien con el siguiente ejemplo.
clip: el texto está recortado y no se puede ver. Este es el valor predeterminado.
Sintaxis:
text-overflow: clip;
Ejemplo: este ejemplo ilustra el uso de la propiedad de desbordamiento de texto donde su valor se establece en recorte.
HTML
<html>
<head>
<title> CSS | text-overflow Property </title>
<style type="text/css">
div {
width: 500px;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
</style>
</head>
<body>
<div>GeeksforGeeks: A computer science portal for geeks.</div>
</body>
</html>
Producción:
CSS text-overflow_clip
puntos suspensivos: el texto se recorta y el texto recortado se representa como ‘…’ .
Sintaxis:
text-overflow: ellipsis;
Ejemplo: Este ejemplo ilustra el uso de la propiedad de desbordamiento de texto donde su valor se establece en puntos suspensivos.
HTML
<html>
<head>
<title> CSS | text-overflow Property </title>
<style type="text/css">
div {
width: 500px;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div> GeeksforGeeks: A computer science portal for geeks. </div>
</body>
</html>
Producción:
string: el texto recortado se representa al usuario mediante una string elegida por el codificador. Esta opción solo es visible en el navegador Firefox.
Sintaxis:
text-overflow: string;
donde una string es definida por el desarrollador.
Ejemplo: este ejemplo ilustra el uso de la propiedad de desbordamiento de texto donde su valor se establece en un valor de string específico.
HTML
<html>
<head>
<title> CSS | text-overflow Property </title>
<style type="text/css">
div {
width: 500px;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: " ";
}
</style>
</head>
<body>
<div> GeeksforGeeks: A computer science portal for geeks. </div>
</body>
</html>
Producción:
initial : se utiliza para establecer la propiedad CSS de un elemento en su valor predeterminado, es decir, este valor establecerá la propiedad de desbordamiento de texto en su valor predeterminado.
Sintaxis:
text-overflow: initial;
Ejemplo: este ejemplo ilustra el uso de la propiedad de desbordamiento de texto donde su valor se establece en inicial.
HTML
<html>
<head>
<title> CSS | text-overflow Property </title>
<style type="text/css">
div {
width: 500px;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: initial;
}
</style>
</head>
<body>
<div> GeeksforGeeks : A computer science portal for geeks. </div>
</body>
</html>
Producción:
heredar : se usa para heredar una propiedad a un elemento del valor de propiedad de su elemento principal, es decir, el valor establecerá la propiedad de desbordamiento de texto en el valor del elemento principal.
Sintaxis:
text-overflow: inherit;
Ejemplo: Este ejemplo ilustra el uso de la propiedad de desbordamiento de texto donde su valor se establece para heredar.
HTML
<html>
<head>
<title> CSS | text-overflow Property </title>
<style type="text/css">
div {
width: 500px;
font-size: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h3 {
width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: inherit;
}
</style>
</head>
<body>
<div> GeeksforGeeks: A computer science portal for geeks.
<h3>
I have inherited my overflow property from div.
</h3>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de desbordamiento de texto se enumeran a continuación:
- cromo 1.0
- Firefox 7.0
- Microsoft Edge 12.0
- IE 6.0
- Safari 1.3
- Ópera 11.0
Publicación traducida automáticamente
Artículo escrito por roshalmoraes y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA