Añadir puntos suspensivos para cortar texto

Lo que buscamos hacer es poner puntos suspensivos (...) al final del contenedor para indicar visualmente que el texto se ha cortado y que continúa. Esto es posible gracias a la utilización de CSS3 y el siguente código:



CSS:

/*Código para agregar los puntos ...*/
.ocultar{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
/*Código para el contenedor*/
#extra{
  width: 50%px;/*lo más importante*/
background: #FFF;
  border: 1px solid #DADADA;
  padding: 7px;
}

HTML:

<div class="ocultar" id="extra">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus mi, mollis eu ante at, tincidunt molestie ex. </div>

Muestra:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus mi, mollis eu ante at, tincidunt molestie ex.

Lo que tiene de interesante éste código, es que lo puedes usar en un diseño responsivo y los puntos se acomodarán donde sea necesario .

Asegúrate que el navegador sopote CSS3.

Esperamos que haya sido de tu ayuda!, si es así puntúalo y comenta.