Twitter Bootstrap Button Text Zeilenumbruch

186

Für mein Leben bin ich nicht in der Lage, diese Twitter-Bootstrap-Schaltflächen so zu gestalten, dass sie in mehrere Zeilen umbrochen werden. Sie sehen so aus.

Ich kann keine Bilder posten, also ist es das, was es tut ...

[Dies ist der Haupttext

Ich möchte, dass es so aussieht

[Dies ist das ]

[Schaltflächentext ]

<div class="col-lg-3"> <!-- FIRST COL -->
  <div class="panel panel-default">
    <div class="panel-body"> 
    <h4>Posted on</h4>
    <p>22nd September 2013</p>
    <h4>Tags</h4>
    <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
           </div>
  </div>
</div>

Jede Hilfe wäre sehr dankbar.

Bearbeiten. Ich habe versucht hinzuzufügen, word-wrap:break-word;aber es macht keinen Unterschied.

Bearbeiten. JSFiddle http://jsfiddle.net/TTKtb/ - Sie müssen die rechte Spalte erweitern, damit die Bedienfelder nebeneinander sitzen.

— M_Becker
quelle

Kannst du jsfiddle oder einen Test dafür erstellen?

— Javascript Coder

1

Warum fügen Sie nicht dort ein, <br>wo Sie Zeilenumbrüche einfügen möchten?

— Ntalbs

Nicht funktionsfähig, da der Inhalt der Schaltflächen beim Laden aus einer Datenbank variiert.

— M_Becker

Der andere Weg jsfiddle.net/TTKtb/4

— Javascript Coder

Wenn Sie an der Stelle, an der Ihr Text umbrochen werden soll, ein <br> einfügen, wird ein Zeilenumbruch angezeigt und der Text umbrochen. Ich weiß, dass dies keine Lösung ist, wenn Sie viel Text haben, aber wenn Sie drei oder vier Wörter haben, die Sie einschließen möchten, könnte dies helfen!

— Pebox11

359

Versuchen Sie Folgendes: Leerzeichen hinzufügen : normal; zur Stildefinition der Bootstrap-Schaltfläche oder Sie können den angezeigten Code durch den folgenden ersetzen

<div class="col-lg-3"> <!-- FIRST COL -->
  <div class="panel panel-default">
    <div class="panel-body"> 
    <h4>Posted on</h4>
    <p>22nd September 2013</p>
    <h4>Tags</h4>
    <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
   <a href="#" class="btn btn-primary btn-xs col-lg-12" style="margin-bottom:4px;white-space: normal;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
           </div>
  </div>
</div>

Ich habe Ihre Geige hier aktualisiert , um zu zeigen, wie es herauskommt.

— Brian Kinyua
quelle

Ahh, wow. Ich habe es gerade nachgeschlagen. Wusste nicht einmal, dass CSS-Code existiert. Danke für Ihre Hilfe! Verbrachte Stunden damit, dieses Problem zu lösen.

— M_Becker

4

@ user2063032 Ich denke, dieser Typ kann den Leerraum- Link am besten erklären .

— Brian Kinyua

Keine Sorge, ich lerne jeden Tag etwas aus dem Stackoverflow. Außerdem werden Sie feststellen, dass die Leerraum-Eigenschaft gut funktioniert, wenn das Element, dh die Schaltfläche, eine bestimmte Breite hat.

— Brian Kinyua

@ user2063032 Wenn die Antwort Ihr Problem gelöst hat, akzeptieren Sie sie bitte. Danke :)

— Brian Kinyua

2

Jahre später ... ersparte mir weitere ## Stunden. Vielen Dank.

— Nie Selam

67

Sie können diese Klasse einfach hinzufügen.

.btn {
    white-space:normal !important;
    word-wrap: break-word; 
}

— Getsomepeaches
quelle

5

Ich musste auch word-break: normalden von Bootstrap festgelegten Wert überschreiben. Aber dann hat es einen Zauber gewirkt!

— Crowmagnumb

1

Sie können diese Stile hinzufügen und es funktioniert genau wie erwartet.

.btn {
    white-space:normal !important; 
    word-wrap: break-word; 
    word-break: normal;
}

— Hühner
quelle

Wenn Sie Inline-Stile verwenden, können Sie dies nur für diese eine Schaltfläche beheben. Fügen Sie es einer Klasse hinzu, damit Sie es in Ihrem gesamten Projekt verwenden können. Die Verwendung einer Spaltendefinition in einer Klasse auf einem Anker wird als schlechte Vorgehensweise bei der Verwendung von Bootstrap angesehen.

— Getsomepeaches

1

FWIW, in Boostrap 4.4 können Sie .text-wrapDingen wie Schaltflächen Stil hinzufügen :

   <a href="#" class="btn btn-primary text-wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>

https://getbootstrap.com/docs/4.4/utilities/text/#text-wrapping-and-overflow

— hwjp
quelle