¿Cómo limito el mínimo y el máximo ancho de un elemento?

Question

Tengo una línea de texto que quiero dibujar bordes alrededor. Por el momento, las miradas de marcado de esta manera:

<div id="titleBox"><span id="titleName" class="truncate">Really really long long long title name</span></div>

Las miradas de estilo como este:

    #titleBox{
    margin-top: 10px;

}

#titleName{
    margin: 5px;
    height: 1.6em;
    width: auto;
    max-width: 15.385em;    
    padding: 0.369em;
    margin: 0.369em;
    line-height: 1.7;
    color: rgba(0,0,0,0.4); 
    background-color: rgba(204,204,204,0.4); 
    border: 3px solid rgba(255,255,255,0.14);
    font-size: 153.9%;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;     
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;        
    -o-text-overflow: ellipsis;
    -moz-binding: url('../templates/ellipsis.xml#ellipsis');
}

El efecto que me gustaría es que me gustaría la caja de estilo para ser el ancho del texto, a menos que la anchura excede un cierto límite. A continuación, me gustaría que el ancho a ser limitado y entonces la clase truncado debería patear.

El problema sólo con el uso de un div es que la caja no se ajusta a la anchura del texto. El uso de un lapso de ayuda, pero entonces no se muestra como un bloque. Obligando a que se muestre como un bloque presenta el mismo problema que envolverlo en un div llanura. Usando una combinación div / span no funciona bien porque el lapso ignora los límites de la div si el texto es demasiado largo.

¿Hay una manera de limitar el ancho del texto, lo que obligó a truncar y tienen una caja de estilo que rodea el texto?

Answer 1

De acuerdo con mi comentario, display:inline-block debe dar el efecto deseado. No funcionará en