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>

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.

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.


@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


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 :-).


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



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.


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


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,

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.