Align text inside input properly

Question

I have an input type text (also tried with textarea), and I've set its height to like 400px, because I want to make it like a text box. For example like that one that i'm typing in right now. Where the text will wrap on new line and so on. THe problem is that the text only goes in the center and scrolls to the right, instead of wrapping. How do I do it properly?

EDIT: Well i've described it, but if here is the code:

<input type="text" name="message" id="contact_message" pattern=".{10,}">

CSS:

#contact_message {
    width: 400px;
    height:400px;
}

post your code here or on any online editor like jsfiddle or codepen and share its link here — Yousaf, Feb 07 '17 at 13:26
Textarea is the one you need to use. not input type text. in text area you can use rows attribute for multiline. — pathak tejpal, Feb 07 '17 at 13:30
I'm curious now; you said you already tried a textarea, so how did it not work? — Mr Lister, Feb 07 '17 at 15:59

kzhao14 · Accepted Answer · 2017-02-07T13:39:59.380

You have two options here: a <textarea> and a <div contenteditable>. I would recommend using a <textarea>.

textarea {
  height: 400px;
  width: 400px;
  word-wrap: break-word;
  outline: 0;
  border: 1px solid black;
  font-family: Arial, Sans-serif;
  font-size: 20pt;
}

<textarea minlength="10">this is some really long text that should break into new lines whenever this crosses 400 pixels wide and go to the new line ehahoitheiahithahihhoghaohhtoihaoiehhnbieoaihtoai</textarea>

You can use a div with contenteditable:

div {
  height: 400px;
  width: 400px;
  font-family: Arial, Sans-serif;
  font-size: 20pt;
  
  }

<div contenteditable>some really long text that should span more than one line when this crosses 400pixels and go into a new line iaoheotheaothoehtoihieothaoihtihiaohtieathioehwaoteahtioehahthahaiohh</div>

pathak tejpal · Answer 2 · 2017-02-07T13:39:20.513

0

You can use TextArea not input tag.

and textarea will do the needful by default. also there is one option for multiline like setting attribute rows.

and then you will not need to set height.

check fiddle here.

https://jsfiddle.net/yxbpoh2d/

<textarea name="message" id="contact_message"></textarea>
#contact_message {
    width: 400px;
    height:400px;
}

edited Feb 07 '17 at 13:39

answered Feb 07 '17 at 13:35

pathak tejpal

838
1
7
13

You don't need the comma. You can also use `minlength` property. – kzhao14 Feb 07 '17 at 13:36
what comma? that is users question. – pathak tejpal Feb 07 '17 at 13:38
Yes, but you can correct mistakes in the user's code. – kzhao14 Feb 07 '17 at 13:39

score 0 · Answer 3 · edited May 23 '17 at 10:30

0

There are various options that you can use.Check here

Here is a fiddle.

 textarea {
    height: 400px;
    width: 400px;
}

Hope it helps.

edited May 23 '17 at 10:30

Community

1
1

answered Feb 07 '17 at 13:36

shubham agrawal

3,435
6
20
31

score 0 · Answer 4 · answered Feb 07 '17 at 13:37

0

#contact_message {
    width: 400px;
    height:400px;
}

<textarea id="contact_message" rows="4" cols="50">

</textarea>

answered Feb 07 '17 at 13:37

PRATAP ODEDRA

41
3

Align text inside input properly

4 Answers4