Создайте input type="button" с двумя строками текста для более новой версии хром

Ответ 1

Хотя я не могу доказать, что это невозможно, не рекомендуется пытаться сделать кнопку input занятой несколькими строками. Прежде всего, спецификация HTML5 говорит только об атрибуте value:

Если элемент имеет атрибут value, метка кнопки должна быть значением этого атрибута

Обратите внимание, что "ярлык кнопки" не определен нигде в спецификации. Это означает, что разработчикам браузеров выбирать, как их интерпретировать, а также означает, что они могут изменить свою интерпретацию по своему усмотрению.

Вы только что стали свидетелями того, как команда Chrome решила внести такие изменения. Возможно, это повторится и в другом браузере. Таким образом, любое решение, которое вы найдете сейчас, не будет постоянным и подчинено прихотям поставщиков браузеров.

Вот почему я настоятельно рекомендую использовать элемент <button>. Потому что это гарантирует, что спецификация позволит вам делать форматирование HTML, например, разрывы строк.

Ответ 2

@aardrian указал правильное направление, вам также нужно установить -webkit-appearance как none, чтобы удалить определенный стиль ввода.

CSS

input {
  white-space: normal;
  width: 50px;
  -webkit-appearance: none;

  background: #ddd;
  border: none;
}

HTML

<input type="submit" value="Text1 Text2 Text3 Text4" />

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

Codepen: http://codepen.io/anon/pen/xOExpX

Кажется, нет никакого способа добавить html внутри значения, значение значения всегда дезинфицируется:

Атрибут content value дает значение по умолчанию для ввода элемент. Когда атрибут content value добавляется, устанавливается или удаляется, если флаг управляющего грязного значения является ложным, пользовательский агент должен установить значение элемента для значения атрибута content value, если он есть, или пустая строка в противном случае, а затем запустите алгоритм дезинфекции текущего значения, если он определен.

Информация: https://www.w3.org/TR/html5/forms.html#attr-input-value

Ответ 3

Используйте <button type=submit> вместо этого.

<button type=submit>First line<br>Second line</button> 

Ответ 4

Hack:

input[type="submit"] {
    white-space: normal;
    width: 7em;
}

Ширина должна соответствовать самому длинному слову. Это не допускает разрывов строк.

Лучшее решение: используйте <button>.

Ответ 5

Насколько я понимаю, невозможно добиться того, чего вы хотите с помощью ввода. Атрибут "значение" будет обрабатывать все внутри как строку, которая должна быть распечатана на экране. Таким образом, любые теги <br /> будут обрабатываться как текст и не будут отображаться как HTML. Он не принимает никаких escape-символов.

Ваш лучший вариант - использовать кнопку, как подсказывает c-smile, или вы можете создать div, настроить его по своему вкусу и добавить javascript на клик, который вызовет отправку формы.

В качестве альтернативы, если вы твердо верите, что вам нужно использовать ввод, вы можете сделать немного javascript (это только если вы не знаете, что слова являются шириной неизвестно).

Для записи я настоятельно рекомендую просто использовать кнопку, вот как вы это делаете:

https://jsfiddle.net/bdLanac5/1/

 var inputValue = $("#myInput").val();
    var inputValues = inputValue.split(" ");
    var longestValue = inputValues.reduce(function (a, b) { return a.length > b.length ? a : b; });
    
    $("#myInput").val(longestValue);
    var length = $("#myInput").outerWidth();
    $("#myInput").css("width", length);
    $("#myInput").val(inputValue);

    input{
      white-space: normal;
    }

<input id="myInput" type="submit" value="This is a test"/>
    
    
   

Ответ 6

Может ли это быть полезным? Не совсем то, что вы просили, я знаю...

( заметьте также разницу шрифтов, так как я получил несколько upvotes, я позаботился о проблеме с шрифтом)

input{
  font-family:inherit;
  font-size:inherit;
}
#line1{
  padding-bottom: 25px; 
  padding-left:5px;
  text-align:left;
  width:75px;/*Depends on the second line lengh*/
}
#line2{ 
  margin-top: -23px; 
  padding-left:7px;  
}

<input type="button" value="Line One" id="line1"/>
<div id="line2">Line Two</div>

Ответ 7

Немного от взлома, но вы можете использовать обычные пробелы, в которых вы хотите, чтобы линия сломалась, и nbsp, где вы этого не сделаете, - тогда просто убедитесь, что ширина установлена ​​правильно.

jsfiddle

    input{
     white-space: normal;
     width: 110px;
    }

<input type="button" value="Text1&#160;Text2&#160;Text3 Text4" />

Ответ 8

<input id="myInput" type="submit" value="Line OneLine Two"/>

input{
  white-space: normal;
  word-break: break-all;
}

#myInput{
  width:73px;
}

Вы можете указать свою ширину кнопке.