<p>I have the following <code>textarea</code> in a <code>table</code>:</p>

<pre><code>&lt;table width="300"&gt;&lt;tr&gt;&lt;td&gt;

&lt;textarea style="width:100%"&gt;
longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring
&lt;/textarea&gt;

&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
</code></pre>

<p>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.</p>

<p>Any ideas as to how to fix this in IE?</p>

[{'answer_id': 33936, 'author': 'Jiaaro', 'author_id': 2908, 'author_profile': 'https://Stackoverflow.com/users/2908', 'pm_score': 0, 'selected': False, 'text': "<p>did you try...</p>\n\n<p><code>overflow: hidden;</code></p>\n\n<p>??</p>\n\n<p>I'm not sure if it should be in the table of the textarea... experiment a bit</p>\n"}, {'answer_id': 33938, 'author': 'Peter Meyer', 'author_id': 1875, 'author_profile': 'https://Stackoverflow.com/users/1875', 'pm_score': 0, 'selected': False, 'text': '<p>or, how about:</p>\n\n<pre><code>overflow: scroll;\n</code></pre>\n\n<p>Edit:</p>\n\n<p>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 <em>suggested</em> width, but can be expanded to accommodate its content.  Not sure.  I know if you use a <code>&lt;DIV&gt;</code> rather than a table, it works.  Additionally, if you apply the 300 pixel width to the containing <code>&lt;TD&gt;</code> element as opposed to the <code>&lt;TABLE&gt;</code> element, it works as well.  Also, the <code>overflow: scroll</code> does nothing!  :P</p>\n\n<p>Nice, funky IE behavior, for sure!</p>\n'}, {'answer_id': 33947, 'author': 'travis', 'author_id': 1414, 'author_profile': 'https://Stackoverflow.com/users/1414', 'pm_score': 0, 'selected': False, 'text': '<p>IE also supports the <a href="http://msdn.microsoft.com/en-us/library/ms531184.aspx" rel="nofollow noreferrer"><code>word-break</code></a> CSS 3 property.</p>\n'}, {'answer_id': 33948, 'author': 'dansays', 'author_id': 1923, 'author_profile': 'https://Stackoverflow.com/users/1923', 'pm_score': 3, 'selected': False, 'text': '<p>Apply the width to the <code>td</code>, not the <code>table</code>.</p>\n\n<p>EDIT: @Emmett - the width could just as easily be applied via CSS.</p>\n\n<pre class="lang-css prettyprint-override"><code>td {\n    width: 300px;\n}\n</code></pre>\n\n<p>produces the desired result. Or, if you\'re using jQuery, you could add the width through script:</p>\n\n<pre><code>$(\'textarea[width=100%]\').parent(\'td\').css(\'width\', \'300px\');\n</code></pre>\n\n<p>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.</p>\n'}, {'answer_id': 33950, 'author': 'Emmett', 'author_id': 2749, 'author_profile': 'https://Stackoverflow.com/users/2749', 'pm_score': 2, 'selected': False, 'text': '<p>@<a href="https://stackoverflow.com/questions/33933/textarea-with-100-width-ignores-parent-elements-width-in-ie7#33938">Peter Meyer</a>, <a href="https://stackoverflow.com/questions/33933/textarea-with-100-width-ignores-parent-elements-width-in-ie7#33936">Jim Robert</a></p>\n\n<p>I tried different overflow values, to no avail.</p>\n\n<p>Experimenting with different values for the wrap attribute and the word-wrap style also wasn\'t fruitful.</p>\n\n<p>EDIT:</p>\n\n<p>@<a href="https://stackoverflow.com/questions/33933/textarea-with-100-width-ignores-parent-elements-width-in-ie7#33936">dansays</a>, <a href="https://stackoverflow.com/questions/33933/textarea-with-100-width-ignores-parent-elements-width-in-ie7#33951">seanb</a></p>\n\n<p>Due to some awkward application-specific constraints, the width can only be applied to the table.</p>\n\n<p>@<a href="https://stackoverflow.com/questions/33933/textarea-with-100-width-ignores-parent-elements-width-in-ie7#33947">travis</a></p>\n\n<p>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.</p>\n'}, {'answer_id': 33951, 'author': 'seanb', 'author_id': 3354, 'author_profile': 'https://Stackoverflow.com/users/3354', 'pm_score': 0, 'selected': False, 'text': '<p>Best thing I could find to make it work, a little hacky:<br>\nwrap textarea with <code>&lt;div style="width:300px; overflow:auto;"&gt;</code> \nmight want to play around with the overflow value </p>\n'}, {'answer_id': 34195, 'author': 'Tyler', 'author_id': 3561, 'author_profile': 'https://Stackoverflow.com/users/3561', 'pm_score': 0, 'selected': False, 'text': '<p>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.</p>\n\n<p>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.</p>\n\n<p>By the way, there is a nice trick available for long strings - the &lt;wbr&gt; tag.  If your browser sees longstringlongstring, then it will <em>try</em> 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 <a href="http://www.quirksmode.org/oddsandends/wbr.html" rel="nofollow noreferrer">this quirksmode page</a> for more.</p>\n'}, {'answer_id': 35568, 'author': 'seanb', 'author_id': 3354, 'author_profile': 'https://Stackoverflow.com/users/3354', 'pm_score': 1, 'selected': False, 'text': '<p>Another very hacky option, if you are stuck with a lot of constraints, but know what the surrounding dom will look like:  </p>\n\n<pre><code>style="width:100%;width:expression(this.parentNode.parentNode.parentNode.parentNode.width +\'px\')"  \n</code></pre>\n\n<p>not pretty, but does work in IE7.<br>\nUsing jquery or similar would be a much neater solution, but it depends on the other constraints you have.</p>\n'}, {'answer_id': 450690, 'author': 'John Dunagan', 'author_id': 28939, 'author_profile': 'https://Stackoverflow.com/users/28939', 'pm_score': 0, 'selected': False, 'text': "<p>I've run into this problem before. It's related to how HTML parses table and cell widths.</p>\n\n<p>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). </p>\n\n<p>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.</p>\n\n<p>Additional tip - encase your width values in whatever set of quotes will nest the value properly (<code>&lt;table width='300'</code>). If someone comes along and changes it to a %, it will ignore the %, otherwise.</p>\n\n<p>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.</p>\n"}, {'answer_id': 594697, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 2, 'selected': False, 'text': '<p>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.</p>\n\n<pre><code>&lt;table style="width:100%;table-layout:fixed"&gt;&lt;tr&gt;&lt;td&gt;\n&lt;textarea style="width:100%"&gt;longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring&lt;/textarea&gt;\n&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;\n</code></pre>\n'}, {'answer_id': 13009054, 'author': 'Saeed', 'author_id': 1726377, 'author_profile': 'https://Stackoverflow.com/users/1726377', 'pm_score': 0, 'selected': False, 'text': '<p>For solve this issue you use space in your text,and you too use this code</p>\n\n<pre><code>overflow:hidden\n</code></pre>\n'}, {'answer_id': 13603097, 'author': 'Mukesh', 'author_id': 1616003, 'author_profile': 'https://Stackoverflow.com/users/1616003', 'pm_score': 0, 'selected': False, 'text': '<p>Give the width in pixels.this should work properly</p>\n'}]
['https://Stackoverflow.com/questions/33933', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2749/']