Como terminar la última línea con puntos suspensivos «…» en CSS

Como terminar la última línea con puntos suspensivos «…» en CSS

Print Friendly, PDF & Email
Valora esta entrada

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?

muestra linea terminada en puntos suspensivos
fijaros como los textos terminan en "..."

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>
puntos suspensivos con css
puntos suspensivos con css

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>
puntos suspensivos con css
puntos suspensivos con css

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!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.