Wie begrenzen wir die minimale und maximale Breite eines Elements?

Question

ich eine Textzeile haben, dass ich will um Grenzen ziehen. Im Moment werden die Markup sieht wie folgt aus:

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

Die Art sieht wie folgt aus:

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

Der Effekt, dass ich möchte, ist, dass ich die Stil-Box möchte die Breite des Textes sein, es sei denn, die Breite eine bestimmte Grenze überschreitet. Dann möchte ich die Breite begrenzt werden und dann sollte die truncate Klasse treten in.

Das Problem mit nur einem div ist, dass die Box nicht auf die Breite des Textes umbrochen. eine Spanne Mit hilft, aber dann ist es nicht als Block angezeigt werden soll. Erzwingen, um sie anzuzeigen, wie ein Block das gleiche Problem wie Einwickeln es in einer Ebene div aufweist. nicht funktioniert entweder eine div / span Kombination verwenden, da die Spannweite der Grenzen des div ignoriert, wenn der Text zu lang ist.

Gibt es eine Möglichkeit, die Breite des Textes zu begrenzen, um es zu zwingen truncate und haben ein gestylten Feld, um den Text umgeben?

Answer 1

Wie pro meinem Kommentar, display:inline-block sollte die gewünschte Wirkung. es wird nicht funktionieren in