让文本在 Firefox 中占据整个文本区域的宽度

Posted 2023-05-07

【中文标题】让文本在 Firefox 中占据整个文本区域的宽度

【英文标题】：Getting text to go the entire width of a textarea in firefox

【发布时间】：2012-07-04 18:46:29

【问题描述】：

请在 Firefox 中查看以下小提琴，您会看到 textarea 中的文本行由于文件名过长而在中途被截断，但在 IE 和 Chrome 中，该行的整个宽度textarea 并且仅在到达末尾时才换行。我想在 Firefox 中实现同样的行为，并用我有限的 CSS 技能尝试了所有我能做的事情，但无济于事，所以我想我会停止拉扯头发，向专业人士寻求帮助。

小提琴：http://jsfiddle.net/yGuAy/1/

【问题讨论】：

我用的是firefox，效果很好……

那么你必须有一些不表现出我所说的行为的版本。我有 13.0.1 版本，如果您使用该版本，您可以清楚地看到我在说什么。

【参考方案1】：

word-wrap: 和 text-wrap: 的值似乎对我不起作用。但是，您可以通过在链接中使用破折号而不是下划线来省略您的问题。

【讨论】：

谢谢，但正如我所说，我真的无法更改文件名，因为它们必须与服务器上的文件名（由我无法访问的 php 脚本生成）匹配，所以我必须坚持使用下划线

你没有提到：p 但是好的，我明白了

【参考方案2】：

如果您使用 textarea 宽度属性和字体大小，您可以达到理想的结果。

JsFiddle Example

【讨论】：

不幸的是，这是不可能的，也没有真正的帮助，因为正如我所说，我无法控制文件名的长度，因为这些是用户提交的文件，我不能重命名它们。

但是你可以设置textarea的宽度，不是吗？ jsfiddle.net/yGuAy/1

不，它已经设置为最大宽度。我只是在小提琴中使用了那个大小，所以你可以在不调整输出窗格大小的情况下看到它。在我的版本中，cols 值已经设置为我可以设置的最高值并保持在站点布局的限制范围内。

【参考方案3】：

通过在 textarea 中添加尺寸样式，它可以工作-

<textarea cols="70" rows="3" style="width: 675px; height: 30px;">http://www.example.com/some_dir/another_dir/some_really_long_and_complex_file_name.ext</textarea>

但这是临时解决方案，但无法弄清楚为什么 firefox 会这样。我认为问题在于 url 中的“/”。如果我删除它可以工作，但我不知道原因。

【讨论】：

我刚刚尝试了您的确切示例，但看不出有任何区别。这是您的确切代码的链接。 Dabblet：dabblet.com/gist/3046720

请通过这个 - jsfiddle.net/sandipkaranjekar/rkN32 和我一起工作。我使用的是 ubuntu firefox 4.0，如果不工作可能是浏览器问题。

不，仍然无法使用您发布的链接。我正在使用 Firefox 13.0..1（最新的公共版本），您的版本已经过时了，从那时起很多事情都发生了变化，这就是为什么它可能适合您。

【参考方案4】：

我认为firefox正在考虑字符串的最后一部分

/some_really_long_and_complex_file_name.ext

是一个单词（这是真的），它可能比文本区域中可用的水平空间长，所以它只是将最后一部分放在下一行。因此，如果您尝试增加文本区域的宽度，它将水平适应。

【讨论】：

是的，我知道为什么会这样文件名。