textarea with 100% width ignores parent element

问题:

I have the following textarea in a table:

<table width="300"><tr><td>

<textarea style="width:100%">
longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring
</textarea>

</td></tr></table>

With a long string in the textarea, the textarea stretches out to accommodate it in one line in IE7, but retains its 300px width in other browsers.

Any ideas as to how to fix this in IE?

回答1:

Apply the width to the td, not the table.

EDIT: @Emmett - the width could just as easily be applied via CSS.

td {
    width: 300px;
}

produces the desired result. Or, if you're using jQuery, you could add the width through script:

$('textarea[width=100%]').parent('td').css('width', '300px');

Point being, there's more than one way to apply a width to a table cell, if development constraints prevent you from applying it directly.

回答2:

@Peter Meyer, Jim Robert

I tried different overflow values, to no avail.

Experimenting with different values for the wrap attribute and the word-wrap style also wasn't fruitful.

EDIT:

@dansays, seanb

Due to some awkward application-specific constraints, the width can only be applied to the table.

@travis

Setting style="word-break:break-all;" sort of worked! It still wraps differently in IE7 and FF. I'll accept this answer if nothing better comes up.

回答3:

Another hacky option, but the only option that works for me - none of the other suggestions on this page do - is to wrap the textarea in a single cell table with a fixed table layout.

<table style="width:100%;table-layout:fixed"><tr><td>
<textarea style="width:100%">longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring</textarea>
</td></tr></table>

回答4:

Another very hacky option, if you are stuck with a lot of constraints, but know what the surrounding dom will look like:

style="width:100%;width:expression(this.parentNode.parentNode.parentNode.parentNode.width +'px')"  

not pretty, but does work in IE7.
Using jquery or similar would be a much neater solution, but it depends on the other constraints you have.

回答5:

did you try...

overflow: hidden;

??

I'm not sure if it should be in the table of the textarea... experiment a bit

回答6:

IE also supports the word-break CSS 3 property.

回答7:

The overflow property is the way to go. In particular, if you want the extra text to be ignored, you can use "overflow:hidden" as a css property on the text.

In general, when a browser has an unbreakable object, such as a long string without spaces, it can have a conflict between various size constraints - those of the string (long) vs its container (short). If you see different behavior in different browsers, they are just resolving this conflict differently.

By the way, there is a nice trick available for long strings - the <wbr> tag. If your browser sees longstringlongstring, then it will try to fit it in the container as a single, unbroken string -- but if it can't fit, it will break that string in half at the wbr. It's basically a break point with a implicit request to not break there, if possible (sort of like a hyphen in printed texts). By the way, it's a little buggy in some versions of Safari and Opera - check out this quirksmode page for more.

回答8:

I've run into this problem before. It's related to how HTML parses table and cell widths.

You're fine setting 300 as a width as long as the contents of the element can never exceed that (setting a div with a definite width inside and an overflow rule is my favorite way).

But absent a solution like the above, the minute ANY element pushes you past that width, all bets are off. The element becomes as wide as it has to to accommodate the contents.

Additional tip - encase your width values in whatever set of quotes will nest the value properly (<table width='300'). If someone comes along and changes it to a %, it will ignore the %, otherwise.

Unfortunately, you're always going to have trouble breaking strings that do not have 'natural' breaks in IE, unless you can do something to break them up via code.

回答9:

For solve this issue you use space in your text,and you too use this code

overflow:hidden

回答10:

Give the width in pixels.this should work properly

回答11:

or, how about:

overflow: scroll;

Edit:

I actually tested this. I think the behavior is such because the width is on the table, which I believe (I have nothing to back this up) I read long ago that the table width is a suggested width, but can be expanded to accommodate its content. Not sure. I know if you use a <DIV> rather than a table, it works. Additionally, if you apply the 300 pixel width to the containing <TD> element as opposed to the <TABLE> element, it works as well. Also, the overflow: scroll does nothing! :P

Nice, funky IE behavior, for sure!

回答12:

Best thing I could find to make it work, a little hacky:
wrap textarea with <div style="width:300px; overflow:auto;"> might want to play around with the overflow value