Texto de botón de arranque de Twitter Word Wrap

186

Por mi vida, no puedo hacer que estos botones de arranque de Twitter se ajusten al texto en varias líneas, aparecen así.

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

[Este es el texto de bu] tton

Me gustaría que pareciera

[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 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 asienten uno al lado del otro.

— M_Becker
fuente

¿Puedes crear jsfiddle o alguna prueba para eso?

— Javascript Coder

1

¿Por qué no inserta <br>donde desea insertar el salto de línea?

— ntalbs

No es viable ya que el contenido de los botones variará según lo cargado desde una base de datos.

— M_Becker

La otra manera jsfiddle.net/TTKtb/4

— Javascript Coder

Si inserta una imagen en el punto donde desea que su texto se ajuste, obtendrá un salto de línea y el texto se ajustará. Sé que esto no es una solución cuando tienes mucho texto, pero cuando tienes tres o cuatro palabras que quieres envolver, ¡esto podría ayudar!

— pebox11

360

Pruebe esto: agregue espacios en blanco: normal; a la definición de estilo del botón Bootstrap o puede reemplazar el código que mostró con 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.

— Brian Kinyua
fuente

Ahh, wow Solo lo busqué. Ni siquiera sabía que existía el código CSS. ¡Gracias por tu ayuda! Pasé horas tratando de resolver esto.

— M_Becker

44

@ user2063032 Creo que este tipo puede explicar mejor el enlace del espacio en blanco .

— Brian Kinyua

No se preocupe, aprendo algo cada día de stackoverflow. También notará que la propiedad de espacio en blanco funciona bien si el elemento, es decir, el botón, tiene un ancho especificado.

— Brian Kinyua

@ user2063032 si la respuesta ha resuelto su problema, acéptelo. Gracias :)

— Brian Kinyua

2

años más tarde ... me ahorró otras ## horas. Gracias.

— Nie Selam

67

Simplemente puede agregar esta clase.

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

— Getsomepeaches
fuente

55

También necesitaba word-break: normalanular el valor establecido por bootstrap. Pero luego funcionó un encanto!

— crowmagnumb

1

Puede agregar estos estilos y funciona exactamente como se esperaba.

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

— pollos
fuente

El uso de estilos en línea solo le permitiría arreglar esto para ese botón. Agréguelo a una clase para que pueda usarlo en todo su proyecto. Usar una definición de col en una clase en un ancla sería una mala práctica al usar Bootstrap.

— Getsomepeaches

1

FWIW, en Boostrap 4.4, puede agregar .text-wrapestilo a cosas como botones:

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