Jak zawinąć tekst przycisku HTML o stałej szerokości?

197

Właśnie zauważyłem, że jeśli dasz przyciskowi HTML stałą szerokość, tekst wewnątrz przycisku nigdy nie zostanie zawinięty. Próbowałem z zawijaniem wyrazów, ale to fragmenty słowa, mimo że są dostępne miejsca do zawijania.

Jak mogę utworzyć tekst przycisku HTML z zawijaniem o stałej szerokości, tak jak w przypadku każdej tablicy tablicowej?

<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>
Rozwiń fragment kodu

Klasy CSS robią tylko dodawanie ramek i modyfikowanie wypełnienia. Jeśli dodam word-wrap:break-worddo tego przycisku, zawinie go w następujący sposób:

Roos Sturingen / Sen
sors

I nie chcę, aby odcinał się w środku słowa, jeśli możliwe jest odcinanie go między słowami.

html css button word-wrap Piotr
źródło

Odpowiedzi:

547

Odkryłem, że możesz skorzystać z właściwości CSS białych znaków:

white-space: normal;

I rozbije słowa jak zwykły tekst.

Siu
źródło
@MGOwen jest już w porządku - w międzyczasie zabiliśmy IE6.
low_rents
1
Inne sugerujące odpowiedzi word-wrap: break-word;nie działały dla mnie, ale tak się stało.
F1Krazy
15 
white-space: normal;
word-wrap: break-word;

Mój działa z oboma

Richard
źródło
8

Można to wymusić (wydaje mi się, że pozwala na to przeglądarka), wstawiając podział wiersza w źródle HTML, w następujący sposób:

<INPUT value="Line 1
Line 2">

Oczywiście ustalenie, gdzie należy wstawić podział linii, niekoniecznie jest trywialne ...

Jeśli można używać HTML <BUTTON>zamiast <INPUT>, tak że przycisk etykieta jest zawartość elementu, a nie jej valueatrybutem, umieszczanie tych treści Wewnątrz <SPAN>z widthatrybutu, który jest kilka pikseli węższy niż przycisku wydaje rade (nawet w IE6 :-).

Brian Nixon
źródło
1
Aby uzyskać coś bardzo prostego, możesz także użyć <przycisku> ze znakiem w żądanym punkcie przerwania.
KevinH
Używany do pracy, ale nie działa już w najnowszych wersjach Chrome.
Joe Mabel
6

Zauważyłem, że przycisk działa, ale chcesz go dodać, style="height: 100%;"aby wyświetlał więcej niż pierwszą linię w Safari na iPhone'a iOS 5.1.1

Nick Saemenes
źródło
3 
   white-space: normal;
   word-wrap: break-word;

„Oba” działały dla mnie.

Bhavani Raju
źródło
2

Tego rodzaju wieloliniowe przyciski nie są tak naprawdę łatwe. Ta strona zawiera interesującą (choć nieco przestarzałą) dyskusję na ten temat. Najlepszym rozwiązaniem byłoby porzucenie wymogu dotyczącego wielu wierszy lub utworzenie niestandardowego przycisku przy użyciu np. divS i CSS oraz dodanie JavaScript, aby działał jak przycisk.

Daan
źródło
Problem polega na tym, że używam ASP.Net, używając formantu asp: button z atrybutami CommandName i CommandArgument. Nie mogę po prostu użyć innej kontroli.
Peter
2

Jeśli w <button>tagu są jakieś wewnętrzne podziały, takie jak to-

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

Kiedyś Tekst klasy A nakłada się na dane klasy 1, ponieważ oba są w jednym tagu przycisku. Próbuję złamać tex używając

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

Ale to nie zadziała, a potem spróbuję…

white-space: normal;

po usunięciu powyższych właściwości css i wykonaniu zadania.

Nadzieja zadziała dla wszystkich !!!

S.Yadav
źródło
1
Czym różni się to od tej odpowiedzi?
Christian Gollhardt
To jest, jeśli zauważysz, użyłem tego z tagiem przycisku.
S.Yadav
Divs nie są dozwolone w obrębie przycisku, to nie jest poprawny HTML.
Ian Devlin,
1 
word-wrap: break-word;

pracował dla mnie.

Juubes
źródło