Índice

Gestionar el texto en exceso

La propiedad text-overflow, que permite gestionar el exceso de texto, se define en el módulo CSS Basic User Interface Module Level 3 (CSS3 UI), en estado Candidate Recommendation a 7 de julio de 2015. He aquí la URL: http://www.w3.org/TR/css-ui-3/

La propiedad CSS text-overflow resulta muy útil para ciertos contenidos voluntariamente abreviados, como el resumen de un artículo o comentarios de los visitantes.

text-overflow

clip;

ellipsis;

string;

Comentarios

  • El valor clip corta (a veces bruscamente) el texto excedente.

  • El valor ellipsis termina el texto cortado con puntos suspensivos.

  • El valor string termina el texto con una cadena de caracteres (string), por ejemplo ", etc.". Solo funciona en Firefox.

La propiedad text-overflow no corta nada, solo sirve para indicar qué hacer (por ejemplo, insertar unos puntos suspensivos) en un texto que ya se ha cortado por overflow: hidden.

Ejemplo

images/CAP21IMG28.png

El código

<!doctype html>   
<html>   
<head>   
<title>Html5</title>    
<meta charset="utf-8">   
<style type="text/css">    
div { margin: 15px;    
      font-size: 150%;        
      width: 272px;    
      padding-left: 3px;   
      border: 1px solid silver;}   
.nada { white-space: nowrap;}   ...