webentwicklung-frage-antwort-db.com.de

Wie kann ich Text in die Bootstrap-Schaltfläche einbinden, ohne die Größe der Schaltfläche zu ändern?

Ich versuche, Text innerhalb der Bootstrap-Schaltfläche umzubrechen oder die Größe zu ändern, ohne die Größe der Schaltfläche zu ändern. Ich habe einige Schaltflächen, die ausgerichtet werden müssen

Ich habe diese Klasse verwendet, der Text wird umgebrochen, aber die Schaltfläche wird größer, was sich auf die Ausrichtung mit anderen Schaltflächen auswirkt

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

Es gibt Beispielcode, ändern Sie einfach die Größe der Ansicht: https://jsfiddle.net/mrapi/3yv314dx/1/

vielen Dank

6
mrapi

Hier geht es mit einer Lösung https://jsfiddle.net/3yv314dx/3/

$('[data-toggle="tooltip"]').tooltip(); 
.btn-outline {
    background-color: transparent;
    color: inherit;
    transition: all .5s;
}

.btn-wrap-text {
    overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-overflow: Ellipsis;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
    <div class="col-sm-6">
    	        <div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                        ARTICLE                        
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                       ARTICLE                  
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                         ARTICLE WITH LONGER NAME
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                         ARTICLE       
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                        ARTICLE               
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                       ARTICLE             
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                        ARTICLE WITH LONGER NAME
                    </button>
                </div>
				<div class="col-sm-4 col-md-4"> 
                    <button class="btn btn-success btn-sm btn-block btn-outline btn-wrap-text" data-toggle="tooltip" title="ARTICLE WITH LONGER NAME">
                       ARTICLE WITH LONGER NAME
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                        ARTICLE                        
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                        ARTICLE                         
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                        ARTICLE                        
                    </button>
                </div>
               <div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                        ARTICLE                        
                    </button>
                </div>
				<div class="col-sm-4 col-md-4">
                    <button class="btn btn-success btn-sm btn-block btn-outline">
                        ARTICLE                        
                    </button>
                </div>
            </div>
			
			
           </div>  
  </div>

In der Lösung habe ich Ellipse verwendet, um zusätzliche Zeichen abzuschneiden und den gesamten verwendeten Text anzuzeigen. tooltip

2
Shiladitya

Sie können die Schriftgröße ändern. Wenn Sie die Schriftgröße nicht ändern möchten, verwenden Sie den folgenden Code 

.btn-wrap-text {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  text-overflow: Ellipsis;
}
2
PraveenKumar

Nicht sicher, warum alle komplizierten Lösungen.

Fügen Sie Ihrem .btn css einfach Folgendes hinzu:

white-space: normal;

Wenn Sie also bereits einen .btn in Ihrer globalen CSS-Datei haben, gehen Sie folgendermaßen vor:

.btn {
    white-space: normal;
}

Oder wenn Sie nichts in Ihrer globalen CSS-Datei haben, tun Sie es einfach inline, wie zum Beispiel:

<button type="button" class="btn btn-primary" style="white-space: normal;">This is some button with text that should wrap</button>

Hinweis: Diese Methode funktioniert möglicherweise nicht mit archaischen Versionen von IE

2
Abela