Texto do botão de inicialização do Twitter

186

Durante toda a minha vida, não consigo colocar esses botões de inicialização do twitter em texto em várias linhas, elas aparecem assim.

Não consigo postar imagens, então é isso que está fazendo ...

[Este é o texto do texto]

Eu gostaria que aparecesse

[Isto é o ]

[botão 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>

Qualquer ajuda seria muito apreciada.

Editar. Eu tentei adicionar, word-wrap:break-word;mas não está fazendo nenhuma diferença.

Editar. JSFiddle http://jsfiddle.net/TTKtb/ - Você precisará expandir a coluna da direita para que os painéis fiquem próximos um do outro.

— M_Becker
fonte

Você pode criar jsfiddle ou algum teste para isso?

— Javascript Coder

1

Por que você não insere <br>onde deseja inserir quebra de linha?

— Ntalbs

Inviável, pois o conteúdo dos botões varia conforme carregado em um banco de dados.

— M_Becker

Por outro lado jsfiddle.net/TTKtb/4

— Javascript Coder

Se você inserir um <br> no ponto em que deseja que o texto seja quebrado, você terá uma quebra de linha e o texto será quebrado. Sei que essa não é uma solução quando você tem muito texto, mas quando você tem três ou quatro palavras que deseja agrupar, isso pode ajudar!

— precisa saber é o seguinte

360

Tente isto: adicione espaço em branco: normal; para a definição de estilo do botão Bootstrap ou você pode substituir o código exibido pelo código abaixo

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

Atualizei seu violino aqui para mostrar como ele sai.

— Brian Kinyua
fonte

Ahh, uau. Apenas procurei. Nem sabia que o código CSS existia. Obrigado pela ajuda! Passamos horas tentando resolver esse problema.

— M_Becker

4

@ user2063032 Acho que esse cara pode explicar melhor o link do espaço em branco .

— precisa saber é o seguinte

Não se preocupe, eu aprendo algo todos os dias com stackoverflow. Você também notará que a propriedade de espaço em branco funcionará bem se o elemento, ou seja, o botão, tiver uma largura especificada.

— Brian Kinyua

@ user2063032 se a resposta resolveu o seu problema, aceite-o. Obrigado :)

— Brian Kinyua

2

anos depois ... me salvou mais ## horas. Obrigado.

— Nie Selam

67

Você pode simplesmente adicionar esta classe.

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

— Getsomepeaches
fonte

5

Eu também precisava word-break: normalsubstituir o valor definido pelo bootstrap. Mas então funcionou um encanto!

— crowmagnumb

1

Você pode adicionar esses estilos e funciona da maneira esperada.

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

— galinhas
fonte

O uso de estilos embutidos permitiria corrigir apenas esse botão. Adicione-o a uma classe para poder usá-lo em todo o seu projeto. Usar uma definição de col em uma classe em uma âncora seria considerado uma prática ruim ao usar o Bootstrap.

— Getsomepeaches

1

No FWIW, no Boostrap 4.4, você pode adicionar .text-wrapestilo a coisas como botões:

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