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.

html css twitter-bootstrap web 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

Respostas:

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