web-dev-qa-db-fra.com

Comment insérer du texte dans le bouton d'amorçage sans changer la taille du bouton?

J'essaie d'envelopper ou de redimensionner le texte à l'intérieur du bouton d'amorçage sans changer la taille du bouton. J'ai quelques boutons à aligner

J'ai utilisé cette classe, le texte est renvoyé à la ligne, mais la taille des boutons augmente, ce qui affecte leur alignement sur ceux d'autres boutons.

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

Il existe un exemple de code, il suffit de redimensionner la vue: https://jsfiddle.net/mrapi/3yv314dx/1/

merci

htmlcsstwitter-bootstraptwitter-bootstrap-3
6
mrapi

Ici vous allez avec une solution 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>

Ici, dans la solution, j'ai utilisé ellipse pour tronquer des caractères supplémentaires et afficher le texte entier utilisé tooltip

2
Shiladitya

Vous pouvez changer la taille de la police. Si vous ne voulez pas changer la taille de la police, utilisez le code ci-dessous 

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

Vous ne savez pas pourquoi toutes les solutions compliquées.

Ajoutez simplement ce qui suit à votre .btn css:

white-space: normal;

Donc, si vous avez déjà un .btn dans votre fichier css global, procédez comme suit:

.btn {
    white-space: normal;
}

Ou si vous n'avez rien dans votre fichier css global, faites-le simplement en ligne, tel que:

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

Remarque: Cette méthode peut ne pas fonctionner avec les versions archaïques d'IE

2
Abela