Menu
I have an input field, in which a user will enter text inside. When the text becomes too long, the input field extends horizontally instead of dropping down vertically.
I tried adding this CSS:
overflow: hidden; word-wrap: break-word; but I had no luck. Any other suggestions on how to accomplish this?
821
You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL in the sidebar or comment list.
The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.
The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box. Note: In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.
How CSS Text Wrap Works CSS handles stretched long words using the inbuilt word-wrap or overflow-wrap property. However, when not controlled, browsers handle such long texts by default. They won't wrap long words until they receive the instruction to do so.
It has since been renamed to overflow-wrap, with word-wrap being an alias. The overflow-wrap property is specified as a single keyword chosen from the list of values below. Lines may only break at normal word break points (such as a space between two words).
For instance, the long h2 text within the text container in the sample image below crosses the border line: Let's see how we can wrap it onto the next line using the word-wrap CSS property: After wrapping the long h2 text in the sample image, here's the output: That's it!
I think you should use a multiline input field as TextArea:
http://htmlhelp.com/reference/html40/forms/textarea.html
Sample code:
<textarea rows="10" cols="30"></textarea> Xtian - You shouldn't have any restriction on where you need to use an <input> or a <textarea>. Just give the text area the same name that you would've used for the input and you'll be fine.
For example, I just replaced
<input type="text" name="reply" /> With
<textarea rows="1" cols="26" name="reply"></textarea> Much better now.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
