Einfaches Umbrechen von Text in einer Schaltfläche, aber mit minimaler Breite ohne unnötigen Leerraum

Question

Ich habe eine Schaltfläche, die eine maximale Breite mit Text innerhalb davon hat, die umhüllen kann. Wenn der Text umgebrochen wird, entspricht die Breite der Schaltfläche der maximalen Breite und lässt Leerraum auf der rechten Seite.

Wie bekomme ich den Knopf, um seine Breite zu minimieren?

.button { 
    max-width: 120px; 
    border: 1px solid black; 
    display: inline-block; 
    word-wrap: break-word; 
} 

Hier ist ein einfaches Beispiel HTML (auch jsfiddle)

<div class="button">Account Navigation</div> 

Diese Schaltfläche so aussieht endet (die rohe ascii Darstellung der Grenzen vergeben):

|----------------| 
|Account   | 
|Navigation  | 
|----------------| 

Aber Ich möchte, dass es so ist:

|----------| 
|Account | 
|Navigation| 
|----------| 

Aber wenn du einen Text geben, die aufgrund von längeren Wörtern mehr Platz braucht, dann sollte es die Taste weiter und brechen alle Worte machen, wenn sie zu lang sind wie diese:

|----------------| 
|Supercalifragili| 
|sticexpialidocio| 
|us    | 
|----------------| 

Dies ist für mich so grundlegend scheint - noch Ich konnte dieses genaue Problem nicht finden.

Bearbeiten: Die Schaltfläche ist eigentlich die Schaltfläche Kontonavigation, die auf diese Weise umschließt, aber der eigentliche Text in der Schaltfläche wird der Vor- und Nachname des Benutzers sein. Der Text in der Schaltfläche ist also dynamisch und kann in eine Zeile passen - oder in zwei oder drei Zeilen.

Auch ist es vorzuziehen, den gesamten Text zu zeigen, anstatt es mit einer Ellipse abzuschneiden. Ich hätte gerne eine CSS-Lösung, aber wenn sich herausstellen sollte, dass Javascript meine einzige Option ist, wäre es nicht das Ende der Welt - da ich bereits eine Logik verwende, um die Größe der Schriftart zu reduzieren, wenn die Schaltfläche zu groß wird .

Answer 1

Ok, also hier zwei Dinge zu decken:

1. Um die Worte brechen, wenn sie super lange sind, fügen Sie einfach die Eigenschaft word-break: break-word;. Dies wird nur lange Wörter brechen, die die Grenze des Containers erreicht haben.

2. Ihr Container wird seine Größe nicht verringern, da, wenn ein Textknoten unter einen anderen Knotenpunkt fällt, der Container technisch immer noch die gleiche Größe hat, nur dass einer seiner Textknoten niedriger verschoben wurde. Um zu steuern, wie sich dies auf Ihre Tasten auswirkt, haben Sie zwei Möglichkeiten:

   a. Korrigieren Sie den max-width Wert so, dass er weit unter 120 Pixel liegt, einer, der gut genug ist, um den Großteil des wahrscheinlichen Textes aufzunehmen, den Sie für die Schaltflächen schreiben.

   b. Fügen Sie den Tasten einige padding-left hinzu, um die richtige Größe wieder herzustellen.

Sie die Geige überprüfen kann ich für diese erstellt (die padding-Lösung) hier: https://jsfiddle.net/Ahm7777/aL4L8m5q/5/.

aktualisiert

Nun, ich kann nicht wirklich, dass jede CSS-Lösung für diesen, wie es Art eines erwarteten Verhalten aus dem Zusammenspiel aller Eigenschaften ist definiert, aber der einfache Ansatz wäre nur noch zu Ein Bereich umschließt die Wörter auf der Schaltfläche, ruft die Breite ab und wendet sie auf die Schaltfläche an. Here ist die Geige mit der Probe von dem, worüber ich rede. Sie müssen nur den Code anwenden, um ausgeführt zu werden, wann immer die Knöpfe ihren Text laden