Create input type="button" with two lines of text for newer version of chrome

Question

I will accept an answer of "not possible" if someone can explain why. However, I will not except an answer with using a <button> because that is not what this question is asking.

I am trying to make an input button with two lines of words, but the newer versions of chrome are not letting me, here is what I have tried:

Carriage Return Separators

    <input type="button" value="Line One&#13;&#10;Line Two"/>

    <input type="button" value="Line One\r\nLine Two">

I know you can use white-space: normal; but this will not let you <br> where you want it to.

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

Is there a way that I can add the new line in the button where I choose?

i.e.

line one

line two

You can use `` https://www.w3.org/TR/html-markup/button.submit.html — Stephen P, Jun 13 '16 at 23:58
@StephenP I know about buttons, trying to do it with `` any idea's? — Adam Buchanan Smith, Jun 13 '16 at 23:59
I will accept an answer of "not possible" if someone can explain why. However, I will not except an answer with using a ` — Adam Buchanan Smith, Jun 14 '16 at 01:06
@swa66 good thing I do not have to report my reasoning to you, have a good weekend! — Adam Buchanan Smith, Jun 24 '16 at 22:51

score 20 · Accepted Answer · answered Jun 17 '16 at 18:33

Although I can't prove that it's not possible, it's not a good idea to try to make the input button take up multiple lines. First of all, the HTML5 spec says only this about the value attribute:

If the element has a value attribute, the button's label must be the value of that attribute

Notice that "button's label" is not defined anywhere in the spec. That means it is up to browser vendors to choose how to interpret that, and it also means that they can change their interpretation at will.

You just witnessed the Chrome team deciding to make such a change. It could happen again, in another browser perhaps. So any solution you find now will not be permanent and subject to the whims of browser vendors.

That's why I strongly recommend using the <button> element. Because it is guaranteed by the spec to allow you to do HTML formatting, like line breaks.

What I am interested in learning is what actually changed, it used to be possible now it is not. Firefox still works and older version of chrome also work. — Adam Buchanan Smith, Jun 17 '16 at 21:09

score 8 · Answer 2 · answered Jun 17 '16 at 17:49

8

@aardrian has pointed the right direction, you also have to set -webkit-appearance as none to remove specific styling of the input.

CSS

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

  background: #ddd;
  border: none;
}

HTML

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

You can change the width to allow more words in each row.

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

It's seems there's no way to add html inside the value, the value value is always sanitized:

The value content attribute gives the default value of the input element. When the value content attribute is added, set, or removed, if the control's dirty value flag is false, the user agent must set the value of the element to the value of the value content attribute, if there is one, or the empty string otherwise, and then run the current value sanitization algorithm, if one is defined.

Info: https://www.w3.org/TR/html5/forms.html#attr-input-value

answered Jun 17 '16 at 17:49

1

I appreciate your attempt to answer, however, I am looking for a solution that you can "break" a line anywhere you like ie `Text1 \n Text2 Text3 \n Text4` Since I am starting to realize this seems to not be possible, I will except an answer describing why it is not possible. I will up-vote your answer since you took time to try to answer and I apologize if I was not clear enough. – Adam Buchanan Smith Jun 17 '16 at 18:08
Like this example https://jsfiddle.net/ynz25v2x/ but with `` not a ` – Adam Buchanan Smith Jun 17 '16 at 18:12
Ok, thanks. I've understood what you need but as far as I'm know it's not possible, value field doesn't accept html. – Jun 17 '16 at 18:20
It doesn't need to be in the value attribute, is there a different attribute I can use? – Adam Buchanan Smith Jun 17 '16 at 18:22
I just came across this http://stackoverflow.com/questions/4015345/how-to-properly-escape-quotes-inside-html-attributes also no longer works, I guess newer version of chrome doesn't allow for any of this. – Adam Buchanan Smith Jun 17 '16 at 18:32
1

The only thing i could came out is putting a label over the input, just an idea http://codepen.io/anon/pen/bewNVE – Jun 17 '16 at 18:34
If you accept a variation of setting a width to force wrapping (which I know does not allow arbitrary breaks), make sure the width is in a unit relative to the base text size — such as `em`. This way as the user changes text size, or the font itself fails to display (network issues), it will still scale based on the size of the letters that do display. – aardrian Jun 17 '16 at 21:03

score 4 · Answer 3 · answered Jun 14 '16 at 00:05

4

Hack:

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

The width should correspond to the longest word. This does not allow arbitrary line breaks.

Better solution: use <button>.

answered Jun 14 '16 at 00:05

aardrian

8,581
30
40

Note that I use a unit relative to the base text size — `em`. This way as the user changes text size, or the font itself fails to display (network issues), it will still scale based on the size of the letters that do display. IOW, do not use `px` as it does not scale with the text. – aardrian Jun 17 '16 at 21:05

score 3 · Answer 4 · answered Jun 13 '16 at 23:59

3

Use <button type=submit> instead.

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

answered Jun 13 '16 at 23:59

c-smile

26,734
7
59
86

I know about buttons, trying to do it with `` any idea's? or is it not possible? – Adam Buchanan Smith Jun 14 '16 at 00:00
@AdamBuchananSmith: Why do you insist on using an ``? Button is clearly the best, non-hacky choice here. We could probably help you more if we knew *why* you need an ``. – rvighne Jun 17 '16 at 17:51
I have a bounty on this question now, if you give me an answer with not possible but why its not possible, I will except that. – Adam Buchanan Smith Jun 17 '16 at 18:14

score 2 · Answer 5 · edited Jun 21 '16 at 07:46

To my understanding it is not possible to achieve what you wish with input. The attribute "value" will treat everything inside as a string that is to be printed out to the screen. So any <br /> tags will just get treated as text and will not be rendered as HTML. It does not accepts any escape characters.

Your best option is to use button as c-smile suggests or you can create a div, style it to your liking and add a javascript on click which will cause a form submission.

Alternatively, if you strongly believe you have to use input you can do a bit of javascript (this is only if you don't know what the words are the width is unknown).

For the record, I strongly advise just use a button, here is how you do it:

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"/>

If you know the width then remove the javascript and add width on css to your input element.

Thanks, closets possible answer to the question +1 – Adam Buchanan Smith Jun 17 '16 at 21:08 — Adam Buchanan Smith, Jun 17 '16 at 21:08

Theodore K. · Answer 6 · 2016-06-24T14:05:21.237

Could this be useful? Not exactly what you asked, I know...

(~~notice the font difference too~~ since I got a few upvotes I took care of the font issue)

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>

score 1 · Answer 7 · edited Jun 21 '16 at 07:13

1

Somewhat of a hack, but you could use regular spaces where you want the line to break, and nbsp where you don't - then just make sure the width is set to house it correctly.

jsfiddle

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

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

edited Jun 21 '16 at 07:13

Shadow

244
1
3
23

answered Jun 20 '16 at 17:02

asimovwasright

838
1
11
28

Thanks, however this does not work for the newer versions of chrome. – Adam Buchanan Smith Jun 20 '16 at 17:03
Seems to be working fine for me? Maybe I as a linux user I get a slightly different build of chrome? – asimovwasright Jun 20 '16 at 17:04
Are you using chrome ver 51.xxx? – Adam Buchanan Smith Jun 20 '16 at 17:06
Version 51.0.2704.103 (64-bit) – asimovwasright Jun 20 '16 at 17:07
but m still unsatisfied with your answer coz @AdamBuchananSmith said that , don't use white-space property – Shadow Jun 21 '16 at 07:19
Indeed, and I am not hoping to be awarded the points, only offering an alternative that might negate the reasons for not wanting the white-space hack in the first place. – asimovwasright Jun 21 '16 at 07:29
1

@AnkitGupta The whitespace would be ok since the answer is using ` ` to break the line, however it just doesn't work on chrome and IE11 – Adam Buchanan Smith Jun 21 '16 at 18:44

score 0 · Answer 8 · answered Jun 24 '16 at 07:04

0

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

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

#myInput{
  width:73px;
}

You can give your own width to button.

answered Jun 24 '16 at 07:04

Tuks

23
6

Create input type="button" with two lines of text for newer version of chrome

8 Answers8