Обтекание текстового значения кнопки ввода HTML на нескольких строках

Как переместить текст в новую строку в элементе ввода HTML с атрибутом type="button"?

У меня есть следующий код:

<input type="button" id="btnTexWrapped" value="I see this is a long sentence here." style="width: 200px;" />

Я хочу, чтобы текстовое значение кнопки было обернуто в две строки. Я попытался ввести его в следующую строку в HTML. Это не сработало, как я ожидал:

<input type="button" id="btnTexWrapped" value="I see this is a long 
sentence here." style="width: 200px;" />

Я также попытался использовать все опции white-space с фиксированным width: 200px;, но все равно ничего не работает.

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

Ответ 1

Попробуйте это, вы можете увидеть, как он работает мгновенно:

<input type="button" value="Carriage&#13;&#10;return&#13;&#10;separators" style="text-align:center;">

Ответ 2

white-space: normal;

должен работать

Ответ 3

Вы можете использовать тег кнопки

<button> Я вижу, что это & lt; br/ " > является длинным предложением < br/" > . Здесь </кнопкa >

Ответ 4

Для тех, кто читает этот вопрос 4 года спустя, я хотел бы добавить некоторые уточняющие подробности. Ответ Локеша правильный (не принятый ответ), но исходный вопрос основан на неправильном понимании того, как работает HTML, к которому никто не обращался.

HTML не является значительным языком в белом пространстве. То есть, все новые строки полностью игнорируются браузером. Хотя вы можете (и должны!) Вставлять новые строки в свой HTML-код, чтобы писать читаемый, поддерживаемый HTML, он (почти) никогда не повлияет на конечный результат (я не буду вдаваться в исключения здесь).

Как указал Локеш, вы можете использовать тег <br />, чтобы принудительно создать новую строку. Другим распространенным способом является использование элементов уровня блока, таких как div или section.

Множество элементов блокируется таблицей стилей браузера UA. Обычно это элементы контейнера, такие как <div>, <section> и <ul>. Также текст "блокирует" как <p> и <h1>. Элементы уровня блока не сидят внутри, а прорываются мимо них. По умолчанию (без установки ширины) они занимают столько горизонтального пространства, сколько могут.

Это цитата из https://css-tricks.com/almanac/properties/d/display/, что является очень хорошей ссылкой на различные свойства для атрибута display.

Кроме того, я не рекомендую использовать какие-либо другие предлагаемые решения, которые требуют ввода кодированных символов новой строки внутри атрибута value. Это толкает тег input, за который он был предназначен. Если вам нужна более сложная информация для кнопки, тег button более уместен. На самом деле, я вообще не думаю, что есть веская причина использовать <input type="button"> вместо тега button. Это гораздо более смысловое, удобное для чтения и бесконечно более гибкое - например, при разрешении в нем перерывов и других элементов (таких как изображения!).

Просто немного знаний и несколько рекомендаций от профессионального веб-разработчика...:)

Ответ 5

В моем одном из проектов я получил кросс-тип требования, я решил, как указано ниже.

использовать строку кодировки html

<input button type="submit" value="This is button 
 two line text" />




для разделения текста в атрибуте value тега кнопки

Надеюсь, это поможет вам.

Ответ 6

Просто нажмите enter в середине значения, например:

I