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

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

Как я могу сделать текст кнопки 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 ничего не делают, кроме добавления границ и изменения заполнения. Если я добавлю слово wrap: break-word к этой кнопке, оно будет завершено так:

Roos Sturingen / Sen
sors

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

Спасибо

Ответ 1

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

white-space: normal;

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

Надеюсь, что это поможет.

Ответ 2

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

<INPUT value="Line 1
Line 2">

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

word-wrap: break-word;

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

Ответ 7

Если у нас есть некоторые внутренние деления внутри тега <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, поскольку оба они находятся в одном теге кнопки. Я пытаюсь сломать tex, используя -

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

Но это не сработает, я попробую это -

white-space: normal;

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

Надежда будет работать для всех!!!