Cuando se trata de mostrar contenido textual de manera concisa y atractiva, truncar el texto es una técnica crucial. En este artículo, exploraremos varias formas de lograr truncado de texto en CSS.

<p>Cuando se trata de mostrar contenido textual de manera concisa y atractiva, truncar el texto es una técnica crucial. En este artículo, exploraremos varias formas de lograr truncado de texto en CSS, desde métodos compatibles con WebKit hasta soluciones que funcionan en una amplia gama de navegadores.</p><h2>1. Implementación de Truncado de Texto Multilínea con <code>-webkit-line-clamp</code></h2><p>El truncado de texto es una técnica esencial en diseño web para mantener la legibilidad y la estética del contenido textual. Una de las formas más efectivas de lograr esto en navegadores basados en WebKit es mediante el uso de <code>-webkit-line-clamp</code>. Esta propiedad CSS permite limitar el número de líneas de texto mostradas y añadir puntos suspensivos al final del texto truncado.</p><h3>Ejemplo Práctico</h3><h4>CSS para <code>-webkit-line-clamp</code></h4><p>Consideremos un ejemplo donde tenemos un contenedor con un texto largo que deseamos truncar después de cierto número de líneas:</p><pre><code class="language-xml">&lt;div class="flex"&gt;
    &lt;div class="w-250"&gt;
        &lt;div class="title"&gt;Webkit line clamp&lt;/div&gt;
        &lt;div class="content"&gt;
            &lt;p class="truncate-webkit-line-clamp"&gt;
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, 
                consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore 
                et dolore magna aliqua.
            &lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre><p>En este ejemplo, tenemos un párrafo extenso dentro de un contenedor que queremos truncar después de mostrar solo las primeras cuatro líneas.</p><h4>CSS para <code>-webkit-line-clamp</code></h4><p>Para lograr el truncado de texto multilínea con <code>-webkit-line-clamp</code>, podemos aplicar el siguiente estilo CSS:</p><pre><code class="language-css">.truncate-webkit-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limita a 4 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Fallback para navegadores no WebKit */
    /* line-height: 1.5em; */
    /* white-space: normal; */
    /* max-height: 6em; */
}
</code></pre><h4>Explicación del CSS:</h4><ul><li><p><code>display: -webkit-box;</code>: Esta propiedad establece un contenedor de tipo caja flexible para el texto.</p></li><li><p><code>-webkit-line-clamp: 4;</code>: Limita el número de líneas de texto mostradas a 4.</p></li><li><p><code>-webkit-box-orient: vertical;</code>: Especifica que las cajas flexibles deben apilarse verticalmente.</p></li><li><p><code>overflow: hidden;</code>: Oculta el contenido que excede el límite de líneas especificado.</p></li><li><p><code>text-overflow: ellipsis;</code>: Agrega puntos suspensivos al final del texto truncado para indicar que hay más contenido.</p></li></ul><h3>Demo:</h3><div class="iframe-module_lidiaEditorIframe__UCqeS"><iframe src="https://codepen.io/CodeChappie/embed/qBGwLpb?default-tab=result&amp;theme-id=dark" title="Truncate multiline with webkit line clamp" frameborder="0" allowfullscreen="true"></iframe></div><h4>Conclusiones y Consideraciones</h4><p>Al implementar <code>-webkit-line-clamp</code>, asegúrate de considerar las limitaciones y compatibilidad con navegadores que no soportan esta propiedad de manera nativa. En tales casos, es recomendable proporcionar un fallback utilizando otras técnicas de truncado de texto, como <code>text-overflow</code> o técnicas puramente CSS.</p><h2>2. Implementación de Truncado de Texto en una Línea con <code>text-overflow: ellipsis</code></h2><p>El truncado de texto en una sola línea es una técnica común en diseño web para manejar texto largo de manera concisa y estética. La propiedad <code>text-overflow</code> en combinación con <code>overflow</code> y <code>white-space</code> permite truncar el texto y agregar puntos suspensivos al final cuando el texto excede el ancho del contenedor.</p><h4>Ejemplo Práctico</h4><p>Consideremos un ejemplo donde tenemos un párrafo de texto dentro de un contenedor que queremos truncar después de una sola línea:</p><pre><code class="language-xml">&lt;div class="flex"&gt;
    &lt;div class="w-250"&gt;
        &lt;div class="title"&gt;Text overflow (Ellipsis)&lt;/div&gt;
        &lt;div class="content"&gt;
            &lt;p class="truncate-text-overflow"&gt;
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Lorem ipsum dolor sit amet, consectetur, Lorem ipsum dolor sit amet, 
                sit amet, consectetur Lorem ipsum dolor sit amet do eiusmod tempor.
            &lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre><p>En este caso, tenemos un párrafo de texto que deseamos truncar después de la primera línea si es que el texto es más largo que el contenedor.</p><h4>CSS para <code>text-overflow: ellipsis</code></h4><p>Para lograr el truncado de texto en una sola línea con <code>text-overflow: ellipsis</code>, podemos aplicar el siguiente estilo CSS:</p><pre><code class="language-css">.truncate-text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}</code></pre><h4>Explicación del CSS:</h4><ul><li><p><code>overflow: hidden;</code>: Oculta el contenido que excede el tamaño del contenedor.</p></li><li><p><code>text-overflow: ellipsis;</code>: Agrega puntos suspensivos al final del texto truncado para indicar que hay más contenido.</p></li><li><p><code>white-space: nowrap;</code>: Evita que el texto se divida en múltiples líneas y lo hace truncar en una sola línea.</p></li></ul><h3>Demo:</h3><div class="iframe-module_lidiaEditorIframe__UCqeS"><iframe src="https://codepen.io/CodeChappie/embed/jOoRXXd?default-tab=result&amp;theme-id=dark" title="Implementación de Truncado de Texto en una Línea con text-overflow: ellipsis" frameborder="0" allowfullscreen="true"></iframe></div><h4>Conclusiones y Consideraciones</h4><p>Al utilizar <code>text-overflow: ellipsis</code> para truncar texto en una sola línea, asegúrate de considerar el diseño responsivo y la longitud potencial del texto. Esta técnica es útil para títulos, descripciones cortas o cualquier otro contenido donde mantener la integridad visual sea crucial.</p><h2>3. Implementación de truncado de texto con CSS puro</h2><p>El truncado de texto utilizando solo CSS es una técnica poderosa para manejar contenido textual largo de manera elegante y consistente en diseños web. En este caso, utilizaremos variables CSS y pseudo-elementos para lograr el efecto de truncado con puntos suspensivos.</p><h4>Ejemplo Práctico</h4><p>Consideremos un ejemplo donde tenemos un párrafo de texto dentro de un contenedor que deseamos truncar después de un cierto número de líneas:</p><pre><code class="language-xml">&lt;div class="flex"&gt;
    &lt;div class="w-250"&gt;
        &lt;div class="title"&gt;Pure CSS&lt;/div&gt;
        &lt;div class="content"&gt;
            &lt;p class="truncate-pure-css"&gt;
                Make sure you target the element with the text directly inside of it. 
                Originally I tried putting the ID on the module, which worked in 
                Chrome/Safari, but failed in Firefox. Putting it on the made it work in both.
            &lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre><p>En este caso, queremos truncar el párrafo después de mostrar solo tres líneas de texto, y añadir puntos suspensivos al final del texto truncado.</p><h4>CSS para Truncado con Pure CSS</h4><p>Para lograr el truncado de texto con CSS puro, podemos utilizar variables CSS y pseudo-elementos para agregar los puntos suspensivos:</p><pre><code class="language-css">.truncate-pure-css {
    --line-height: 1.2rem; /* Altura de línea */
    --max-lines: 3; /* Máximo número de líneas a mostrar */

    position: relative;
    max-height: calc(var(--line-height) * var(--max-lines)); /* Calcula la altura máxima */

    overflow: hidden; /* Oculta el contenido que excede el contenedor */
    word-break: break-word; /* Rompe las palabras largas */
    padding-right: 1.8rem; /* Espacio para los puntos suspensivos */
    text-align: justify; /* Justifica el texto */
}

.truncate-pure-css::before {
    position: absolute;
    content: "..."; /* Contenido de los puntos suspensivos */
    inset-block-end: 0; /* Alineación en la parte inferior (bottom) */
    inset-inline-end: 0; /* Alineación en el extremo derecho (right) */
}</code></pre><h4>Explicación del CSS:</h4><ul><li><p><code>--line-height</code> y <code>--max-lines</code>: Variables CSS para definir la altura de línea y el número máximo de líneas a mostrar.</p></li><li><p><code>position: relative;</code>: Establece la posición relativa para el contenedor.</p></li><li><p><code>max-height: calc(var(--line-height) * var(--max-lines));</code>: Calcula la altura máxima del contenedor basado en las variables.</p></li><li><p><code>overflow: hidden;</code>: Oculta cualquier contenido que exceda el tamaño del contenedor.</p></li><li><p><code>word-break: break-word;</code>: Rompe las palabras largas para ajustarse al contenedor.</p></li><li><p><code>padding-right: 1.8rem;</code>: Añade un espacio a la derecha del contenedor para los puntos suspensivos.</p></li><li><p><code>text-align: justify;</code>: Justifica el texto para una apariencia más limpia.</p></li><li><p><code>.truncate-pure-css::before</code>: Pseudo-elemento utilizado para agregar los puntos suspensivos al final del texto truncado.</p></li></ul><h3>Demo:</h3><div class="iframe-module_lidiaEditorIframe__UCqeS"><iframe src="https://codepen.io/CodeChappie/embed/ExzJGBK?default-tab=result&amp;theme-id=dark" title="Truncar texto con CSS puro" frameborder="0" allowfullscreen="true"></iframe></div><h4>Conclusiones y Consideraciones</h4><p>Implementar truncado de texto utilizando solo CSS ofrece una solución robusta y compatible con una amplia gama de navegadores. Asegúrate de ajustar los valores de las variables y los estilos según las necesidades específicas de tu diseño y el contenido que estés manejando.</p><h2>4. Implementación de Truncado de Texto con Efecto de Desvanecimiento (Fade Out) en CSS</h2><p>El truncado de texto con efecto de desvanecimiento es una técnica interesante para manejar texto largo de manera elegante, mostrando puntos suspensivos que se desvanecen gradualmente en el fondo. En este caso, utilizaremos variables CSS y un fondo degradado para lograr este efecto.</p><h4>Ejemplo Práctico</h4><p>Consideremos un ejemplo donde tenemos un párrafo de texto dentro de un contenedor que queremos truncar después de un cierto número de líneas y aplicarle un efecto de desvanecimiento al final del texto.</p><pre><code class="language-xml">&lt;div class="flex"&gt;
    &lt;div class="w-250"&gt;
        &lt;div class="title"&gt;Fade Out&lt;/div&gt;
        &lt;div class="content"&gt;
            &lt;p class="truncate-fade-out"&gt;
                Make sure you target the element with the text directly inside of it. 
                Originally I tried putting the ID on the module, which worked in 
                Chrome/Safari, but failed in Firefox. Putting it on the made it work in both.
            &lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre><p>En este caso, queremos truncar el párrafo después de mostrar solo tres líneas de texto y aplicar un efecto de desvanecimiento gradual al final del texto truncado.</p><h4>CSS para Truncado con Efecto de Desvanecimiento</h4><p>Para lograr el truncado de texto con efecto de desvanecimiento, podemos utilizar variables CSS y un pseudo-elemento para el fondo degradado:</p><pre><code class="language-css">.truncate-fade-out {
    --line-height: 1.2rem; /* Altura de línea */
    --max-lines: 3; /* Máximo número de líneas a mostrar */

    position: relative;
    max-height: calc(var(--line-height) * var(--max-lines)); /* Calcula la altura máxima */

    overflow: hidden; /* Oculta el contenido que excede el contenedor */
    word-break: break-all; /* Rompe las palabras largas si es necesario */
}

.truncate-fade-out::before {
    position: absolute;
    content: ""; /* Contenido del pseudo-elemento */
    width: 100%; /* Ancho del elemento */
    height: 100%; /* Altura del elemento */
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #282828 80%); /* Degradado de fondo */
    bottom: 0; /* Alineación en la parte inferior */
    right: 0; /* Alineación en el extremo derecho */
}</code></pre><h4>Explicación del CSS:</h4><ul><li><p><code>--line-height</code> y <code>--max-lines</code>: Variables CSS para definir la altura de línea y el número máximo de líneas a mostrar.</p></li><li><p><code>position: relative;</code>: Establece la posición relativa para el contenedor.</p></li><li><p><code>max-height: calc(var(--line-height) * var(--max-lines));</code>: Calcula la altura máxima del contenedor basado en las variables.</p></li><li><p><code>overflow: hidden;</code>: Oculta cualquier contenido que exceda el tamaño del contenedor.</p></li><li><p><code>word-break: break-all;</code>: Rompe las palabras largas si es necesario para ajustarse al contenedor.</p></li><li><p><code>.truncate-fade-out::before</code>: Pseudo-elemento utilizado para agregar el efecto de desvanecimiento al final del texto truncado utilizando un fondo degradado.</p></li></ul><h3>Demo:</h3><div class="iframe-module_lidiaEditorIframe__UCqeS"><iframe src="https://codepen.io/CodeChappie/embed/QWRPzXo?default-tab=result&amp;theme-id=dark" title="Truncate text with fade" frameborder="0" allowfullscreen="true"></iframe></div><h4>Conclusiones y Consideraciones</h4><p>Implementar truncado de texto con efecto de desvanecimiento utilizando CSS ofrece una solución visualmente atractiva para manejar texto largo de manera efectiva en tus diseños web. Asegúrate de ajustar los valores de las variables y los estilos según las necesidades específicas de tu diseño y el contenido que estés manejando.</p><hr><h3>Consideraciones Finales</h3><p>Al elegir la técnica de truncado de texto adecuada, es importante considerar la compatibilidad con los navegadores, la legibilidad del contenido truncado y la coherencia con el diseño general del sitio web. Cada método tiene sus ventajas y limitaciones, por lo que es recomendable realizar pruebas y ajustes según el contexto específico del proyecto.</p><p>Implementar estas técnicas no solo mejora la presentación visual del contenido textual, sino que también contribuye a una experiencia de usuario más satisfactoria al facilitar la navegación y la comprensión del contenido en diferentes dispositivos y tamaños de pantalla.</p><p>En resumen, al utilizar estas técnicas de truncado de texto con CSS, los diseñadores y desarrolladores pueden optimizar la presentación del contenido textual sin comprometer la accesibilidad ni la estética, mejorando así la usabilidad y la experiencia del usuario en el entorno web moderno.</p>

Contenido

Formas de truncar texto en CSS

@codechappie