Как обернуть текст кнопки HTML с фиксированной шириной?

Я только что заметил, что если вы дадите кнопке HTML фиксированную ширину, текст внутри кнопки никогда не будет перенесен. Я пробовал это с переносом слов, но это сокращение слова, хотя есть места для переноса.

Как я могу сделать текст кнопки HTML с фиксированной шириной переноса, как любой табличный элемент?

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

Классы CSS ничего не делают, кроме добавления границ и изменения отступов. Если я добавлю word-wrap:break-wordк этой кнопке, она будет обернута так:

Roos Sturingen / Sen
sors

И я не хочу, чтобы это обрезалось в середине слова, если есть возможность обрезать его между словами.

Я обнаружил, что вы можете использовать свойство CSS пробелов:

white-space: normal;

И это сломает слова как обычный текст.

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

Шахта работает с обоими

Вы можете принудительно (разрешить браузер, я полагаю), вставляя разрывы строк в исходный код HTML, например так:

<INPUT value="Line 1
Line 2">

Конечно, определение места размещения разрывов строки не обязательно тривиально ...

Если <BUTTON>вместо HTML можно использовать HTML- код <INPUT>, чтобы метка кнопки была содержимым элемента, а не его valueатрибутом, размещение этого содержимого внутри <SPAN>с widthатрибутом, который на несколько пикселей уже, чем у кнопки, кажется, помогает (даже в IE6 :-).

Я обнаружил, что кнопка работает, но вы захотите добавить style="height: 100%;"к ней, чтобы она отображала больше, чем первая строка в Safari для iPhone iOS 5.1.1

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

«Оба» работали на меня.

Подобные многострочные кнопки не так уж и просты в реализации. На этой странице есть интересная (хотя и несколько устаревшая) дискуссия на эту тему. Лучше всего было бы либо отказаться от требования о многострочности, либо создать пользовательскую кнопку, используя, например, divs и CSS, и добавить немного JavaScript, чтобы она работала как кнопка.

Если у нас есть некоторые внутренние подразделения внутри <button>тега, как это-

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

Иногда текст класса A перекрывается с данными class1, потому что они оба находятся в одном теге кнопки. Я пытаюсь сломать текс, используя

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

Но это не сработало, тогда я попробую это

white-space: normal;

после удаления вышеуказанных свойств css и выполнения моей задачи.

Надеюсь будет работать на всех !!!

word-wrap: break-word;

работал на меня.