Jak zawijać tekst przycisku html o stałej szerokości

Question

Właśnie zauważyłem, że jeśli podasz przycisk HTML o stałej szerokości, tekst wewnątrz przycisku nigdy się nie opakuje. Próbowałem go z zawijaniem wyrazów, ale te fragmenty wyrazu, mimo że dostępne są spacje.

W jaki sposób mogę utworzyć tekst przycisku html o stałej szerokości, jak każdy tablecell?

<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 nie robią nic poza dodawaniem obramowań i modyfikowaniem dopełnienia. Jeśli dodać słowo-wrap: break-word do tego przycisku, to owinąć go tak:

Roos Sturingen/Sen 
sors 

A ja nie chcę, żeby wyciąć z w środku wyrazu, czy jest możliwe, aby go wyciąć wyłączone między słowami.

Dzięki

Answer 1

Okazało się, że można skorzystać z właściwości CSS white-space:

white-space: normal; 

I będzie przerwa słowa jako zwykły tekst.

Mam nadzieję, że to pomaga.

Answer 2

Przyciski z wieloma liniami, takie jak te, nie są naprawdę łatwe do wdrożenia. This page ma interesującą (choć nieco przestarzałą) dyskusję na ten temat. Najlepszym rozwiązaniem byłoby, gdybyś zrezygnował z wymogu obsługi wielu linii lub aby utworzyć przycisk niestandardowy za pomocą np. div s i CSS oraz dodanie niektórych skryptów JavaScript, aby działały jako przyciski.

Answer 3

Można go zmusić (przeglądarka pozwoli, mogę sobie wyobrazić), wstawiając znaki końca linii w kodzie HTML, jak poniżej:

<INPUT value="Line 1 
Line 2"> 

Oczywiście wypracowanie gdzie umieścić podziały wiersza niekoniecznie jest trywialne .. .

Jeśli można użyć HTML <BUTTON> zamiast <INPUT> tak, że przycisk etykieta jest zawartość elementu, a nie jego atrybutem value umieszczenie tej zawartości wewnątrz <SPAN> z atrybutem width że jest kilka pikseli węższy niż z przycisk wydaje się działać (nawet w IE6 :-).

Answer 4

I odkryli, że przycisk działa, ale że będziemy chcieli dodać style="height: 100%;" przycisku tak, że będzie pokazać więcej niż w pierwszej linii z Safari na iPhone iOS 5.1.1

Answer 5

word-wrap: break-word; 

pracował dla mnie.

Answer 6

Jeśli mamy jakieś wewnętrzne podziały wewnątrz <button> tagu 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 dostać nakładania się na danych Klasa1 ponieważ są one zarówno w jednym tagu przycisk. staram się przełamać tex using-

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

Ale to nie będzie pracował wtedy staram this-

white-space: normal; 

po zdjęciu powyżej właściwości CSS, ale moje zadanie wykonane.

Nadzieja zadziała dla wszystkich !!!

Answer 7

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

Kopalnia działa zarówno