La block-overflowpropiedad trunca el texto e indica que sigue más contenido insertando una elipsis o una cadena personalizada después de un número de líneas establecido por la max-linespropiedad.
La propiedad se ha introducido en el Borrador del Editor de la especificación de Nivel 3 del Módulo de Desbordamiento de CSS. Eso significa que es experimental en este momento y se considera un trabajo en progreso. De hecho, puede seguir la conversación que incluye charlas sobre el cambio de nombre de la propiedad por completo.
Sintaxis
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow acepta los siguientes valores:
clip: No inserta un carácter para indicar más texto a seguir. En cambio, el contenido simplemente se trunca y se corta en el último carácter.ellipsis: Muestra una elipsis (…) al final de la última línea. Debería representarse como un carácter Unicode (U + 2026) pero podría ser reemplazado por un equivalente basado en el idioma del contenido y el modo de escritura del User-Agent que se esté utilizando.: Muestra texto personalizado (por ejemplo, “Leer más →”) al final de la última línea. La especificación dice que el User-Agent puede reemplazar la cadena con puntos suspensivos si la cadena es "absurdamente" larga.
Una vez más, todo esto es un trabajo experimental en curso. Estos valores pueden cambiar. O se podrían agregar más. Por ejemplo, ha habido llamados a una elipsis "más inteligente" que podría ser capaz de hacer más cosas, como recortar el texto en el medio:
One thing led to another and… yada yada yada, that was that.Usar line-clamppara abreviar
Podemos obtener casi lo mismo usando line-clampwhich es la abreviatura de las propiedades block-overflowy max-lines.
Sin embargo, tal como está definido actualmente, line-clampsolo acepta un único valor numérico max-linesy establece implícitamente block-overflowel ellipsisvalor. Por lo tanto, si desea utilizar una cadena personalizada para el truncamiento, debe optar por la forma larga.
Soporte del navegador
Ninguno por el momento, pero puede obtener algo de soporte utilizando la implementación propietaria de WebKit de line-clamp:
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 14 * | 68 * | No | 17 | 5 * |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 * | 85 * | 2,3 * | 5,0-5,1 * |