Twitter Bootstrap Botón Texto Ajuste de Línea

Por mi vida, no puedo conseguir que estos botones de arranque de Twitter se ajusten al 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 bu] tton

Me gustaría que pareciera como

[Este es el]

[texto del botó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;">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 word-wrap:break-word; pero no está haciendo ninguna diferencia.

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

Author: user2063032, 2013-09-25
Source

3 answers

Pruebe esto: agregue espacio en blanco: normal; a la definición de estilo del botón Bootstrap o puede reemplazar el código que mostró por el siguiente

<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 su violín aquí para mostrar cómo sale.

 296
Author: Brian Kinyua,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-25 04:34:51

Simplemente puede agregar esta clase. 

.btn{
    white-space:normal !important;
    word-wrap: break-word; 
}
 49
Author: Adam Kolinski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-04 01:19:33

Puede agregar estos estilos y funciona como se espera.

<a 
    href="#" 
    class="btn btn-primary btn-xs col-lg-12" 
    style="white-space:normal !important; word-wrap: break-word; word-break: normal;"
>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</a>
 0
Author: rturkek,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-28 05:43:17