input text 自动换行css; textarea

  • The <input> element is used to select user information.
  • <input type=text> is single line by definition

An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more.

  • The <textarea> tag defines a multi-line text input control.

A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area can be specified by the cols and rows attributes, or even better; through CSS‘ height and width properties.

textarea{overflow-y:auto;padding:0;width:100px;height:100px;border:1px solid gray;}时:
全部为w:100px h:100px
这个textarea很混乱。但是设置了padding:0和border:1px solid gray后就全部都统一了。

The wrap options are the most tricky part of text areas. If you turn wrap off the text is handled as one long sequence of text without linebreaks. If you set it to virtual the text appears on your page as if it recognized linebreaks – but when the form is submitted the linebreaks are turned off. If you set it to physical the text is submitted exactly as it appears on the screen – linebreaks included.


如当<input type=”text” id=”input1″ value=”asdfasdfsdafsdfa132423″> 值长度超过5个,就实现自动换行

solution: input不能自动换行,但可以试CSS,根据宽度换行, style=”word-break:break-all”

<textarea id=”TextArea1″ cols=”5″ rows=”2″></textarea>

word-break: normal|break-all|hyphenate;

Allow long words to be able to break and wrap onto the next line:

Value Description
normal Breaks non-CJK scripts according to their own rules
break-all Lines may break between any two characters for non-CJK scripts
hyphenate Words may be broken at an appropriate hyphenation point

input text换行了,你就看不到上一行了

HTML5 placeholder text

There is a new attribute as part of HTML5 forms called placeholder. It shows faded gray text in the textarea (also works for text-style inputs) which disappears when the textarea is in focus or has any value.

<textarea placeholder="Remember, be nice!" cols="30" rows="5"></textarea>

All WebKit browsers, Firefox 3.6, and Opera 10 all put a glowing blue border around textareas when they are in focus. You can remove it from the WebKit browsers like this:

textarea {
  outline: none;

REMINDER: The blue glow is becoming a strong standard and breaking that standard is typically a bad thing for your users. If you do it, you should have a darn compelling reason to as well as a similarly strong :focus style.

Add resize handle

jQuery UI has a resizeable interaction that can be used on textareas. It works in all browsers and overrides the WebKit native version, because this version has all kinds of fancy stuff (like callbacks and animation).

To use it, load jQuery and jQuery UI on your page and at its most basic level you call it like this:


Auto-resize to fit content

James Padolsey has a super nice jQuery script for auto resizing textareas. It works just how you likely hope it does. The textarea starts out a normal reasonable size. As you type more and more content, the textarea expands to include all of that text, rather than triggering a scrollbar as is the default.

The plugin has a variety of options, but at its simplest you just load jQuery, the plugin file, and call it like this:



If you want to be able to type into textareas and would rather lines do not break until you press return/enter (a horizontal scrollbar is triggered instead), you’ll have to use the wrap="off" attribute.
<textarea wrap=”off” cols=”30″ rows=”5″></textarea>
#whatever { white-space: nowrap; }.

Remove default scrollbars in Internet Explorer

IE puts a vertical scrollbar by default on all textareas. You can hid it with overflow: hidden, but then you don’t get any scrollbars at all when you expand. Thankfully auto overflow works to remove the scrollbar but still put them back when needed.

textarea {
  overflow: auto;

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Just another site

Jing's Blog

Just another site

Start from here......







Just another site

Where On Earth Is Waldo?

A Project By Melanie Coles

the Serious Computer Vision Blog

A blog about computer vision and serious stuff

Cauthy's Blog

paper review...

Cornell Computer Vision Seminar Blog

Blog for CS 7670 - Special Topics in Computer Vision


Life through nerd-colored glasses

Luciana Haill

Brainwaves Augmenting Consciousness



Dr Paul Tennent

and the university of nottingham

turn off the lights, please

A bunch of random, thinned and stateless thoughts around the Web

%d bloggers like this: