Una de las cosas que me llama la atención en algunas páginas web es que en ocasiones terminan los extractos en «…».
Un extracto es un pequeño resumen de unas pocas líneas de una publicación.
Si te gusta wordpress fíjate que la funcionalidad de extracto se incluye de forma nativa en la herramienta para todas las entradas.
¿Como lo hacen?
Si googleas un poco verás que existen muchísimas formas de hacerlo.
De todas, la única solución satisfactoria para mi es con javascript o con php. Contar un número de palabras determinado y substituir la última por tres puntos suspensivos «…».
Sin embargo te propongo a continuación 2 soluciones interesantes pensadas exclusivamente en CSS.
Alternativa 1
<!DOCTYPE html>
<html>
<head>
<title>interrumpir párrafo con puntos suspensivos</title>
<meta charset="utf-8"/>
<style>
section{
width:400px;
}
section p:last-child::after{
content:"...";
}
</style>
</head>
<body>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat atque molestiae voluptas, harum, sint odio, expedita repellat aperiam provident iusto praesentium. A magnam soluta cupiditate aliquam voluptas ullam reiciendis, ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio necessitatibus repellat, ea dolore, ut, molestias voluptate autem neque sapiente amet totam similique laboriosam cumque asperiores optio? Inventore officia, officiis adipisci.</p>
</section>
</body>
</html>
El punto clave es el uso del selector :last-child que selecciona la última etiqueta p dentro de section.
Para entender ::after te recomiendo esta entrada.
El inconveniente de esta alternativa es que en realidad se ve todo el texto que pongamos. Los «…» no cortan sino que son puramente decorativos.
Alternativa 2
<!DOCTYPE html>
<html>
<head>
<title>interrumpir párrafo con puntos suspensivos</title>
<meta charset="utf-8"/>
<style>
section{
width:400px;
}
section p:last-child{
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat atque molestiae voluptas, harum, sint odio, expedita repellat aperiam provident iusto praesentium. A magnam soluta cupiditate aliquam voluptas ullam reiciendis, ab.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio necessitatibus repellat, ea dolore, ut, molestias voluptate autem neque sapiente amet totam similique laboriosam cumque asperiores optio? Inventore officia, officiis adipisci.</p>
</section>
</body>
</html>
La propiedad white-space controla si la linea hace salto de linea al terminar el espacio o no.
La propiedad overflow hace que el texto que sobresalga del section (400px) no se vea.
Finalmente la propiedad text-overflow es puramente decorativa.
Este método tiene el inconveniente de que afecta únicamente a una línea. No pudiendo hacer dos.¡Hola!
Querido lector,
En esta entrada has podido ver 2 propuestas que se salen de lo común (en base a lo que vas a encontrar por internet).
Espero que te hayan sido de utilidad. No son perfectas pero…. ¡si lo quieres hacer todavía mejor tocará aprender php y/o javascript!
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Deja una respuesta