html - español - bootstrap examples

Twitter Bootstrap Button Text Word Wrap

Question

Por mi vida, no puedo obtener estos botones de arranque de Twitter para ajustar el texto en varias líneas, que aparecen así.

No puedo publicar imágenes, así que esto es lo que está haciendo ...

[Este es el texto de butonton

Me gustaría que parezca

[Este es el ]

[botón de texto ]

<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>

Cualquier ayuda sería muy apreciada.

Editar. He intentado agregar el word-wrap:break-word; pero no está haciendo ninguna diferencia.

Editar. JSFiddle http://jsfiddle.net/TTKtb/ - Lo necesitará expandir la columna de la derecha para que los paneles se coloquen uno al lado del otro.

Answer 1

Intenta esto: agrega espacio en blanco: normal; a la definición de estilo del botón Bootstrap o puede reemplazar el código que se muestra con el que se muestra a continuación

<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>

He actualizado tu violín here para mostrar cómo sale.

Answer 2

Simplemente puede agregar esta clase.

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