Як обернути текст кнопки 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">

Звичайно, розробка місця розміщення рядків не обов'язково тривіальна ...

Якщо ви можете використовувати HTML, <BUTTON>а не такий <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 накладається на дані класу1, тому що вони знаходяться в одному тезі кнопок. Я намагаюся зламати текс за допомогою-

 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;

працював на мене.