如何删除FF中textarea右侧的空白块空间？答案

【问题标题】：How to remove a white block space on the right of a textarea in FF?如何删除FF中textarea右侧的空白块空间？
【发布时间】：2011-08-28 07:58:36
【问题描述】：

我希望 textarea 显示与具有相同宽度的 div 元素相同的文本，并且它在 Chrome 中运行良好，但 Firefox 在 textarea 右侧有一个白色块，它会切断最后一个字母。

您可以在这里找到一个 jsfiddle 示例：http://jsfiddle.net/ngn6Y/9/ 其中包含与以下相同的代码：

var fontsize = '12px';
$(function(){
    var t = 'abcdefg';
    var e = $('body');
    var a = $('<div>').appendTo(e).text(t)
        .css({
            border:'thin solid black',
            position:'absolute',
            top:'40px',
            padding:'2px',
            margin:0,
            height:fontsize,
            'font-size':fontsize,
            'font-family': '"lucida grande",Tahoma, Arial,sans-serif'
        });
    var b = $('<textarea>').appendTo(e).val(t)
        .css({
            border:'thin solid black',
            padding:'2px',
            margin:0,
            outline:0,
            resize:'none',
            overflow:'hidden',
            height:fontsize,
            'word-wrap':'break-word',
            'font-size':fontsize,
            'font-family': '"lucida grande",Tahoma, Arial,sans-serif'
        }).width(a.width());
});

谢谢！

编辑：感谢下面 Ionuț G. Stan 的回答，我为这个问题添加了另一个限定条件：这个 textarea 需要换行，例如使用 'word-wrap':'break-word'，否则当单词长度超过允许的最大宽度时，整个文本阴影点都会丢失。

【问题讨论】：

你为什么用jQuery来应用CSS？
抱歉，复制粘贴一种代码似乎更容易一些
在更多地摆弄它之后，我发现将 3 个像素添加到宽度使其工作，就像这样 .width(a.width() + 3)。但我希望制作一个与字体大小无关的插件，并且我想找到一种方法来确定所有浏览器在任何字体大小下的这个值。

标签： html css firefox cross-browser

【解决方案1】：

将word-wrap: normal 添加到文本区域。似乎解决了 FF 4.0.1 中的问题。

【讨论】：

哇——也可以在 3.6 中使用，真奇怪。它不能用“word-wrap:break-word;”修复这是在这样的文本阴影情况下所需要的。我应该将其编辑到问题中。谢谢！

【解决方案2】：

Firefox 为 textarea 提供了额外的 0px 1px 填充以与 Internet Explorer 兼容。

【讨论】：