10

我有以下textarea内容table

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

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

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

在 textarea 中有一个长字符串,在 IE7 中 textarea 会拉伸以将其容纳在一行中,但在其他浏览器中保持其 300px 的宽度。

关于如何在 IE 中解决此问题的任何想法?

4

12 回答 12

5

将宽度应用于td,而不是table

编辑:@Emmett - 宽度可以通过 CSS 轻松应用。

td {
    width: 300px;
}

产生期望的结果。或者,如果您使用的是 jQuery,您可以通过脚本添加宽度:

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

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

于 2008-08-29T04:15:06.533 回答
2

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

<table style="width:100%;table-layout:fixed"><tr><td>
<textarea style="width:100%">longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring</textarea>
</td></tr></table>
于 2009-02-27T13:19:18.830 回答
2

@彼得迈耶吉姆罗伯特

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

为 wrap 属性和 word-wrap 样式尝试不同的值也没有结果。

编辑:

@dansays ,肖恩布_

由于一些尴尬的特定于应用程序的约束,宽度只能应用于表格。

@特拉维斯

设置 style="word-break:break-all;" 有点工作!它在 IE7 和 FF 中的包装仍然不同。如果没有更好的结果,我会接受这个答案。

于 2008-08-29T04:15:42.507 回答
1

另一个非常 hacky 的选择,如果你遇到很多限制,但知道周围的 dom 会是什么样子:

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

不漂亮,但在 IE7 中工作。
使用 jquery 或类似的解决方案将是一个更简洁的解决方案,但这取决于您拥有的其他约束。

于 2008-08-30T01:50:58.917 回答
0

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.

于 2009-01-16T15:13:58.113 回答
0

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

一般来说,当浏览器有一个不可破坏的对象时,例如一个没有空格的长字符串,它可能会在各种大小约束之间发生冲突——字符串(长)与它的容器(短)。如果您在不同的浏览器中看到不同的行为,它们只是以不同的方式解决此冲突。

顺便说一句,长字符串有一个很好的技巧 - <wbr> 标签。如果您的浏览器看到 longstringlongstring,那么它会尝试将其作为单个完整的字符串放入容器中——但如果它不能放入,它将在 wbr 处将该字符串分成两半。如果可能的话,它基本上是一个带有隐式请求的断点,不在那里中断(有点像印刷文本中的连字符)。顺便说一句,它在某些版本的 Safari 和 Opera 中存在一些问题 - 请查看此 quirksmode 页面了解更多信息。

于 2008-08-29T08:45:34.620 回答
0

你试过了吗...

overflow: hidden;

??

我不确定它是否应该在 textarea 的表格中...尝试一下

于 2008-08-29T04:00:03.230 回答
0

或者,怎么样:

overflow: scroll;

编辑:

我实际上对此进行了测试。我认为这种行为是因为宽度在桌子上,我相信(我没有什么可以支持的)我很久以前读过表格宽度是建议的宽度,但可以扩展以适应其内容。没有把握。我知道如果您使用 a<DIV>而不是 table,它会起作用。此外,如果将 300 像素宽度应用于包含<TD>元素而不是<TABLE>元素,它也可以正常工作。此外,overflow: scroll什么都不做!:P

不错,时髦的 IE 行为,当然!

于 2008-08-29T04:03:11.443 回答
0

IE 还支持word-breakCSS 3 属性。

于 2008-08-29T04:13:32.463 回答
0

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

于 2008-08-29T04:15:44.580 回答
0

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

于 2012-11-28T10:38:56.577 回答
0

为了解决这个问题,您在文本中使用空格,并且您也使用此代码

overflow:hidden
于 2012-10-22T10:03:48.790 回答