Comment puis-je limiter la largeur minimale et maximale d'un élément?

Question

J'ai une ligne de texte que je veux tracer des frontières autour. À l'heure actuelle, le balisage ressemble à ceci:

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

Le style ressemble à ceci:

    #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');
}

L'effet que je voudrais est que je voudrais la boîte de style pour être la largeur du texte, à moins que la largeur dépasse une certaine limite. Ensuite, je voudrais la largeur limitée et la classe troncature devrait botter.

Le problème avec seulement l'aide d'un div est que la boîte ne revient pas à la largeur du texte. En utilisant une durée utile, mais il ne présente pas comme un bloc. Le forçant à afficher sous forme de bloc présente le même problème que l'enveloppant dans une plaine div. En utilisant une combinaison div / span ne fonctionne pas, soit parce que la durée ne tient pas compte des limites de la div si le texte est trop long.

Est-il possible de limiter la largeur du texte, ce qui oblige à tronquer et une boîte de style autour du texte?

Answer 1

Comme par mon commentaire, display:inline-block devrait donner l'effet désiré. il ne fonctionnera pas dans