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

197

Я только что заметил, что если вы дадите кнопке 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

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

— Питер
источник

547

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

white-space: normal;

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

— Сиу
источник

@ MGO теперь все в порядке - мы тем временем замочили IE6.

— low_rents

1

Другие ответы, предлагающие word-wrap: break-word;, не работали для меня, но это сделало.

— F1Krazy

15

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

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

— Ричард
источник

8

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

<INPUT value="Line 1
Line 2">

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

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

— Брайан Никсон
источник

1

Для чего-то очень простого вы также можете использовать <button> со звездочкой в желаемой точке останова.

— KevinH

Раньше работал, но больше не работает в последних версиях Chrome.

— Джо Мейбл

6

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

— Ник Семен
источник

3

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

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

— Бхавани Раджу
источник

2

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

— Даан
источник

Проблема в том, что я использую ASP.Net, используя элемент управления asp: button с атрибутами CommandName и CommandArgument. Я не могу просто использовать другой элемент управления.

— Питер

2

Если у нас есть некоторые внутренние подразделения внутри <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 и выполнения моей задачи.

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

— S.Yadav
источник

1

Чем это отличается от этого ответа?

— Кристиан Голлхардт

Это, если вы заметили, я использовал это с тегом кнопки.

— С.Ядав

Divs не допускаются внутри кнопки, это не правильный HTML.

— Ян Девлин

1

word-wrap: break-word;

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

— Juubes
источник