Question

我在表格中有以下textarea：

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

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

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

在textarea中有一个长字符串，textarea在IE7中延伸到一行，但在其他浏览器中保留了300px的宽度。

关于如何在IE中修复此问题的任何想法？

Answer 1

将宽度应用于td，而不是table。

编辑：@Emmett - 宽度可以很容易地通过CSS应用。

td {
    width: 300px;
}

产生所需的结果。或者，如果您使用的是jQuery，则可以通过脚本添加宽度：

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

重点是，如果开发限制阻止您直接应用宽度，那么将宽度应用于表格单元的方法不止一种。

Answer 2

@ Peter Meyer，Jim Robert

我尝试了不同的溢出值，但无济于事。

尝试使用wrap属性和自动换行样式的不同值也没有用处。

编辑：

@ dansays，seanb

由于某些特定于应用程序的特殊约束，宽度只能应用于表。

@ travis

设置style =“word-break：break-all;”有点工作！在IE7和FF中它仍然有所不同。如果没有更好的结果，我会接受这个答案。

Answer 3

另一个hacky选项，但唯一对我有用的选项 - 本页面上的其他建议都没有 - 将textarea包装在具有固定表格布局的单个单元格表中。

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

Answer 4

另一个非常糟糕的选择，如果你遇到很多限制，但要知道周围的dom会是什么样子：

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

不漂亮，但在IE7中有效。
使用jquery或类似方法将是一个更简洁的解决方案，但它取决于你拥有的其他限制。

Answer 5

你试过试试......

overflow: hidden;

...

我不确定它是否应该在textarea的表格中...实验一点

Answer 6

或者，怎么样：

overflow: scroll;

编辑：

我实际测试了这个。我认为行为是这样的，因为宽度在桌子上，我相信（我没有什么可以支持的）我很久以前就读过表格宽度是建议的宽度，但是可以扩展以适应其内容。不确定。我知道如果你使用<DIV>而不是表，它就可以了。此外，如果将300像素宽度应用于包含<TD>元素而不是<TABLE>元素，则它也可以正常工作。此外，overflow: scroll什么也没做！：P

确实很好，时髦的IE行为！

Answer 7

IE还支持word-break CSS 3属性。

Answer 8

我能找到的最好的东西让它有用，有点hacky：
用<div style="width:300px; overflow:auto;">包裹textarea 可能想要玩溢出值

Answer 9

溢出属性是要走的路。特别是，如果您希望忽略额外的文本，可以使用“overflow：hidden”作为文本的css属性。

通常，当浏览器具有不可破坏的对象（例如没有空格的长字符串）时，它可能在各种大小约束之间发生冲突 - 字符串（长）与其容器（短）之间的冲突。如果您在不同的浏览器中看到不同的行为，他们只是以不同的方式解决这种冲突。

顺便说一下，对于长字符串有一个很好的技巧 - ＆lt; wbr＆gt;标签。如果你的浏览器看到longstringlongstring，那么它将尝试将它作为单个不间断的字符串放入容器中 - 但如果它不适合，它将在wbr中将该字符串分成两半。它基本上是一个断点，如果可能的话，隐含的请求不会中断（有点像打印文本中的连字符）。顺便说一句，在某些版本的Safari和Opera中它有点儿错误 - 请查看this quirksmode page以获取更多信息。

Answer 10

我以前遇到过这个问题。它与HTML如何分析表格和单元格宽度有关。

只要元素的内容永远不会超过（设置内部具有明确宽度的div并且溢出规则是我最喜欢的方式），您可以将300设置为宽度。

但如果没有像上面那样的解决方案，那么分钟ANY元素会推动你超过这个宽度，所有的赌注都会被取消。元素变得尽可能宽，以容纳内容。

附加提示 - 将您的宽度值包含在任何引号集中将正确嵌套值（<table width='300'）。如果有人出现并将其更改为％，则会忽略％，否则。

不幸的是，除非你可以通过代码分解它们，否则你总是会在打破IE中没有“自然”中断的字符串时遇到麻烦。

Answer 11

要解决此问题，请在文本中使用空格，并使用此代码

overflow:hidden

Answer 12

以像素为单位给出宽度。这应该可以正常工作

100％宽度的textarea忽略IE7中父元素的宽度

12 个答案: