En JavaScript, hay varias formas de manejar la asincronía, cada una con sus características y ventajas. Las principales son los callbacks, las promesas y el async/await.

<p>En JavaScript, hay varias formas de manejar la asincronía, cada una con sus características y ventajas. Las principales son los callbacks, las promesas y el async/await. A continuación, describiré cada una de ellas, destacando sus diferencias y cómo se relacionan entre sí.</p><h3>Callbacks</h3><p><strong>Definición</strong>: Un callback es una función que se pasa como argumento a otra función y que se ejecuta después de que la operación asincrónica haya sido completada.</p><p><strong>Uso</strong>: Es el enfoque más antiguo y básico para manejar la asincronía en JavaScript.</p><p><strong>Ejemplo</strong>:</p><pre><code class="language-javascript">function operacionAsincrona(callback) {
    setTimeout(function() {
        callback("Resultado de la operación asincrónica");
    }, 2000);
}

operacionAsincrona(function(resultado) {
    console.log(resultado);
});</code></pre><p><strong>Características</strong>:</p><ul><li><p><strong>Anidamiento</strong>: Puede llevar a un fenómeno conocido como "callback hell" cuando hay múltiples operaciones anidadas.</p></li><li><p><strong>Simplicidad</strong>: Es simple y directo para tareas simples, pero puede volverse difícil de mantener con la complejidad creciente.</p></li></ul><h3>Promesas</h3><p><strong>Definición</strong>: Una promesa representa el resultado eventual (éxito o fallo) de una operación asincrónica y permite encadenar operaciones.</p><p><strong>Uso</strong>: Introducidas para resolver problemas de anidamiento excesivo de callbacks y mejorar la legibilidad del código asincrónico.</p><p><strong>Ejemplo</strong>:</p><pre><code class="language-javascript">function operacionAsincrona() {
    return new Promise((resolve, reject) =&gt; {
        setTimeout(function() {
            let exito = true;  // Simulamos éxito
            if (exito) {
                resolve("Resultado de la operación asincrónica");
            } else {
                reject("Hubo un error en la operación");
            }
        }, 2000);
    });
}

operacionAsincrona()
    .then(resultado =&gt; {
        console.log(resultado);
    })
    .catch(error =&gt; {
        console.error(error);
    });</code></pre><p><strong>Características</strong>:</p><ul><li><p><strong>Encadenamiento</strong>: Permite encadenar múltiples operaciones asincrónicas de manera clara y legible.</p></li><li><p><strong>Manejo de Errores</strong>: Facilita el manejo centralizado de errores a través del método <code>catch</code>.</p></li></ul><h3>Async/Await</h3><p><strong>Definición</strong>: El async/await es una sintaxis más reciente que simplifica aún más la escritura y lectura de código asincrónico basado en promesas.</p><p><strong>Uso</strong>: Introducido en ECMAScript 2017 (ES8), es una forma declarativa y más fácil de trabajar con operaciones asincrónicas.</p><p><strong>Ejemplo</strong>:</p><pre><code class="language-javascript">async function operacionPrincipal() {
    try {
        let resultado = await operacionAsincrona();
        console.log(resultado);
    } catch (error) {
        console.error(error);
    }
}

operacionPrincipal();</code></pre><p><strong>Características</strong>:</p><ul><li><p><strong>Sintaxis Clara</strong>: Permite escribir código asincrónico de manera secuencial y fácil de entender, similar a la programación sincrónica.</p></li><li><p><strong>Mejora la Legibilidad</strong>: Reduce la complejidad y el anidamiento de código en comparación con callbacks y promesas.</p></li></ul><h3>Comparación entre Callbacks, Promesas y Async/Await</h3><p><strong>Igualdades</strong>:</p><ul><li><p>Todos son utilizados para manejar operaciones asincrónicas en JavaScript.</p></li><li><p>Permiten ejecutar código después de que una operación asincrónica ha terminado.</p></li></ul><p><strong>Diferencias</strong>:</p><ul><li><p><strong>Callbacks</strong>:</p><ul><li><p>Son funciones pasadas como argumentos a otras funciones.</p></li><li><p>Propenso a "callback hell" con anidamientos excesivos.</p></li><li><p>Más difícil de manejar errores y secuencialización de operaciones.</p></li></ul></li><li><p><strong>Promesas</strong>:</p><ul><li><p>Representan el resultado eventual de una operación asincrónica.</p></li><li><p>Permiten encadenar operaciones de manera más limpia con <code>then()</code> y manejar errores con <code>catch()</code>.</p></li><li><p>Mejora la legibilidad y mantenibilidad del código en comparación con callbacks.</p></li></ul></li><li><p><strong>Async/Await</strong>:</p><ul><li><p>Sintaxis más moderna y declarativa para trabajar con código asincrónico basado en promesas.</p></li><li><p>Permite escribir código asincrónico de manera secuencial y fácil de entender.</p></li><li><p>Mejora significativamente la legibilidad y reduce la complejidad en comparación con callbacks y promesas.</p></li></ul></li></ul><h3>Recomendaciones de Uso:</h3><ul><li><p><strong>Callbacks</strong>: Úsalo en casos simples o cuando estés trabajando con bibliotecas que todavía no han adoptado promesas o async/await.</p></li><li><p><strong>Promesas</strong>: Es preferible para manejar operaciones asincrónicas en la mayoría de los casos debido a su manejo mejorado de errores y su capacidad de encadenamiento.</p></li><li><p><strong>Async/Await</strong>: Utilízalo siempre que sea posible para mejorar la legibilidad y mantenibilidad del código, especialmente en proyectos modernos o nuevos.</p></li></ul><p>En resumen, aunque todos los métodos manejan la asincronía en JavaScript, la elección entre callbacks, promesas y async/await debe hacerse considerando la complejidad del código, la legibilidad y las mejores prácticas de desarrollo moderno.</p>

Describe diferentes formas de manejar la asincronía en JavaScript (callbacks, promesas, async/await).

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

Describe diferentes formas de manejar la asincronía en JavaScript (callbacks, promesas, async/await).

@codechappie

Formas de truncar texto en CSS

@codechappie