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

Question

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

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

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

Roos Sturingen / Sen

sors

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

спасибо

635 8

html css button

8 ответов:

Comments

Ничего не найдено.

Siu · Accepted Answer · 2011-08-15 16:03:51

Я обнаружил, что вы можете использовать свойство css пробел:
white-space: normal;
и это будет ломать слова, как обычный текст.

надеюсь, что это помогает.

Brian Nixon · Accepted Answer · 2010-05-01 22:42:03

вы можете заставить его (браузер позволяет, я полагаю), вставляя разрывы строк в HTML-источнике, например:
<INPUT value="Line 1
Line 2">
конечно, разработка того, где разместить разрывы строк, не обязательно тривиальна...

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

Nick Saemenes · Accepted Answer · 2012-07-12 16:09:41

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

Richard · Accepted Answer · 2017-08-18 03:17:17

white-space: normal;
word-wrap: break-word;
мои работы с

S.Yadav · Accepted Answer · 2017-02-22 11:32:01

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

надеюсь, что будет работать для всех !!!

Daan · Accepted Answer · 2009-05-14 11:22:35

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

Juubes · Accepted Answer · 2016-11-26 21:34:35

word-wrap: break-word;
работал для меня.

Bhavani Raju · Accepted Answer · 2018-06-13 14:08:29

   white-space: normal;
   word-wrap: break-word;
" оба " работали на меня.