codequince: Truncar textos con puntos suspensivos CSS

Algunas veces me ha pasado que un determinado texto tiende a sobrepasar su contenedor y automáticamente hay un desplazamiento hacia abajo(salto de linea).
En este tutorial aprenderemos como truncar el texto con '...' y visualizarlo en una sola linea.

Situación Inicial
He creado un documento truncate_texto.html, para explicar mejor la situación.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Truncar texto con puntos suspensivos</title>
    <style>
      .wrapper{
        width: 400px;
        background: blue;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <!-- un div contenedor que tiene la clase wrapper -->
    <div class="wrapper">
      <!-- 2 titulos ejemplo -->
        <h1> Truncar texto con puntos suspensivos </h1>
        <h1> Truncar texto con puntos suspensivos </h1>
      <!-- 2 parrafos ejemplo -->
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
  </body>
</html>

Este documento tiene un div contenedor con clase wrapper, además 2 títulos y 2 párrafos.
Sí abrimos el documento en un navegador tendríamos lo siguiente :

Como se puede apreciar tenemos saltos de lineas tanto para los títulos y párrafos.
Lo que vamos hacer es aplicarle 3 reglas que funcionan juntan para truncar un texto lo que conlleva a dejarlo en una sola linea y agregarle los puntos suspensivos.

Reglas

overflow:hidden - ( Ocultar los contenidos que salen fuera del contenedor)
white-space: nowrap -(No hacer un salto de linea.)
text-overflow:ellipsis -(Incluir los puntos suspensivos cuando se va reduciendo su contenido.)

Observación : Esto se hace en tiempo real y funciona para una sola linea.

documento truncate_text.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Truncar texto con puntos suspensivos</title>
    <style>
      .wrapper{
        width: 400px;
        background: blue;
        color: #fff;
      }
      .title,.paragraph{
            background-color: #000000;
            color: white;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <!-- un div contenedor que tiene la clase wrapper -->
    <div class="wrapper">
      <!-- 2 titulos ejemplo -->
        <!-- 1 titulo con clase title -->
        <h1 class="title"> Truncar texto con puntos suspensivos </h1>

        <h1> Truncar texto con puntos suspensivos </h1>

      <!-- 2 parrafos ejemplo -->
        <!-- 1 parrafo con clase paragraph -->
        <p class="paragraph">
          Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
  </body>
</html>

Se agrego las clases title y paragraph con sus reglas que definimos anteriormente, ahora refrescamos el documento truncate_text.html en el navegador.

Como vemos se ve la diferencia del efecto que hace cuando el texto es mas ancho a su contenedor, se agregan los puntos suspensivos.
Cualquier duda que tengan, dejen sus preguntas y con gusto los apoyaré.

codequince

viernes, 20 de noviembre de 2015

Truncar textos con puntos suspensivos CSS

No hay comentarios.:

Publicar un comentario