Как обернуть текст кнопки 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


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



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 и выполнения моей задачи.

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


1
Чем это отличается от этого ответа?
Кристиан Голлхардт

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.