Como quebrar o texto do botão HTML com largura fixa?


197

Acabei de notar que, se você der uma largura fixa a um botão HTML, o texto dentro do botão nunca será quebrado. Eu tentei com quebra de linha, mas isso corta a palavra mesmo que haja espaços disponíveis para quebra.

Como posso criar o texto de um botão HTML com uma quebra de largura fixa, como faria qualquer célula de tablete?

<td class="category_column">
  <input type="submit" name="ctl00$ContentPlaceHolder1$DataList1$ctl12$ProCat_NameButton" value="Roos Sturingen / Sensors" id="ctl00_ContentPlaceHolder1_DataList1_ctl12_ProCat_NameButton" class="outset" style="height:118px;width:200px;font-size:18px;color:#7F7F7F;width:200px;white-space:pre;"
  />
</td>

As classes CSS não fazem nada além de adicionar bordas e modificar o preenchimento. Se eu adicionar word-wrap:break-worda este botão, ele o envolverá assim:

Roos Sturingen / Sen
sors

E não quero cortar no meio de uma palavra, se for possível cortá-la entre as palavras.

Respostas:


547

Descobri que você pode fazer uso da propriedade CSS de espaço em branco:

white-space: normal;

E isso quebrará as palavras como texto normal.


@MGOwen está tudo bem agora - entretanto, amortecemos o IE6.
low_rents

1
As outras respostas sugerindo word-wrap: break-word;não funcionaram para mim, mas isso funcionou.
F1Krazy 11/11/19

15
white-space: normal;
word-wrap: break-word;

A mina trabalha com ambos


8

Você pode forçá-lo (se o navegador permitir, imagino) inserindo quebras de linha na fonte HTML, assim:

<INPUT value="Line 1
Line 2">

É claro que trabalhar onde colocar as quebras de linha não é necessariamente trivial ...

Se você pode usar um HTML em <BUTTON>vez de um <INPUT>, de modo que o rótulo do botão seja o conteúdo do elemento, e não o seu valueatributo, colocar esse conteúdo dentro de um <SPAN>com um widthatributo que é alguns pixels mais estreito que o do botão parece fazer o truque (até no IE6 :-).


1
Para algo muito simples, você também pode usar <button> com um <br> no ponto de interrupção desejado.
KevinH

Costumava funcionar, mas não funciona mais nas versões recentes do Chrome.
9788 Joe Mabel

6

Descobri que um botão funciona, mas você deseja adicioná style="height: 100%;"-lo para que ele apareça mais do que a primeira linha no Safari para iPhone iOS 5.1.1


3
   white-space: normal;
   word-wrap: break-word;

"Ambos" funcionaram para mim.


2

Botões de várias linhas como esse não são realmente triviais de implementar. Esta página tem uma discussão interessante (embora um pouco datada) sobre o assunto. Sua melhor aposta provavelmente seria descartar o requisito de várias linhas ou criar um botão personalizado usando, por exemplo div, se CSS e adicionar um pouco de JavaScript para fazê-lo funcionar como um botão.


O problema é que estou usando o ASP.Net, usando o controle asp: button com os atributos CommandName e CommandArgument. Não posso simplesmente usar outro controle.
314 Peter

2

Se tivermos algumas divisões internas dentro de <button>tags como esta,

<button class="top-container">
    <div class="classA">
       <div class="classB">
           puts " some text to get print." 
       </div>
     </div>
     <div class="class1">
       <div class="class2">
           puts " some text to get print." 
       </div>
     </div>
</button>

Em algum momento, o texto da classe A se sobrepõe aos dados da classe1 porque ambos estão em uma única tag de botão. Eu tento quebrar o tex usando-

 word-wrap: break-word;         /* All browsers since IE 5.5+ */
 overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */ 

Mas isso não funcionou, então eu tento isso-

white-space: normal;

depois de remover as propriedades css acima e concluí minha tarefa.

Espero que funcione para todos !!!


1
Como isso difere desta resposta?
Christian Gollhardt

É, se você perceber, eu usei isso com a tag button.
S.Yadav 23/02

Divs não são permitidos em um botão, ele não é o HTML correto.
Ian Devlin

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.