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

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

Как я могу сделать текст кнопки HTML с фиксированной шириной обтекания, как любой 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>

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

Roos Sturingen / Sen
sors

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


button html css word-wrap
person Peter    schedule 14.05.2009    source источник

Ответы (8)


arrow_upward
602
arrow_downward

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

white-space: normal;

И он разбивает слова как обычный текст.

person Community    schedule 28.07.2009
comment
@MGOwen, теперь все в порядке - тем временем мы отключили IE6. - person low_rents; 06.11.2017
comment
Другие ответы, предполагающие word-wrap: break-word;, не сработали для меня, но это сработало. - person F1Krazy; 11.10.2019

arrow_upward
24
arrow_downward 

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

Мой работает с обоими

person Richard    schedule 18.08.2017

arrow_upward
8
arrow_downward

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

<INPUT value="Line 1
Line 2">

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

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

person Brian Nixon    schedule 04.04.2010
comment
Для чего-то очень простого вы также можете использовать ‹button› с ‹br› в нужной точке останова. - person KevinH; 28.05.2010
comment
Раньше работало, но больше не работает в последних версиях Chrome. - person Joe Mabel; 02.02.2017

arrow_upward
6
arrow_downward

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

person Nick Saemenes    schedule 11.07.2012

arrow_upward
5
arrow_downward 

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

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

person Bhavani Raju    schedule 17.04.2018

arrow_upward
2
arrow_downward

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

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

arrow_upward
2
arrow_downward

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

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

person S.Yadav    schedule 22.02.2017
comment
Чем это отличается от этого ответа? - person Christian Gollhardt; 22.02.2017
comment
Если вы заметили, я использовал это с тегом кнопки. - person S.Yadav; 23.02.2017
comment
Внутри кнопки нельзя использовать Div, это неправильный HTML. - person Ian Devlin; 27.09.2018

arrow_upward
1
arrow_downward 

word-wrap: break-word;

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

person Juubes    schedule 26.11.2016