CSS3: Recortar textos con puntos suspensivos (…) automáticos

Método para añadir al final del texto 3 puntos suspensivos cuando no hay más espacio en el elemento contenedor, sin utilizar html, php, javascript… solo con CSS.

Usando especialmente las propiedades text-overflow:ellipsis (para recortar la cadena con puntos suspensivos) y white-space:nowrap (para manejar los espacios en blanco y los saltos de línea).

.cortar{
  width:200px;
  height:20px;
  padding:20px;
  border:1px solid blue;
  text-overflow:ellipsis;
  white-space:nowrap; 
  overflow:hidden; 
}
.cortar:hover {
  width: auto;
  white-space: initial;
  overflow:visible;
  cursor: pointer;
}

Ejemplo:

Y el mismo ejemplo, pero con un efecto de transición:

.cortar{
  width:200px;
  height:20px;
  padding:20px;
  border:1px solid blue;
  text-overflow:ellipsis;
  white-space:nowrap; 
  overflow:hidden;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.cortar:hover {
  width: 100%;
  white-space: initial;
  overflow:visible;
  cursor: pointer;
}