En ocasiones, por temas de diseo, podemos desear que nuestro elemento tenga solo una linea de texto.

Para ello:

.elemento{
    white-space: nowrap; 
    overflow: scroll;
}

Partimos de este ejemplo:

Y le aplicamos el estilo anterior:

En este caso tendremos scroll, y podemos ver el contenido del texto… en el caso que no queramos mostrar el resto del texto tendremos que setear la propiedad overflow a hidden.
Quedaría así

.elemento{
    white-space: nowrap; 
    overflow: hidden;
}

Y si ahora queremos truncar el texto con puntos suspensivos en css, podemos hacerlo añadiendo la propiedad text-overflow:ellipsis

Con lo que nos quedaría:

.elemento{
    white-space: nowrap; 
    overflow: hidden;
    text-overflow:ellipsis
}