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

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

179 голосов
/ 14 мая 2009

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

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

Ответы [ 8 ]

486 голосов
/ 28 июля 2009

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

white-space: normal;

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

9 голосов
/ 18 августа 2017 
white-space: normal;
word-wrap: break-word;

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

8 голосов
/ 04 апреля 2010

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

<INPUT value="Line 1
Line 2">

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

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

6 голосов
/ 12 июля 2012

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

2 голосов
/ 22 февраля 2017

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

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

1 голос
/ 17 апреля 2018 
   white-space: normal;
   word-wrap: break-word;

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

1 голос
/ 26 ноября 2016 
word-wrap: break-word;

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

1 голос
/ 14 мая 2009

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

...