如何删除FF中文本区域右侧的空白块？

发布于 2024-11-08 07:18:05 字数 1256 浏览 0 评论 0原文

我希望文本区域显示与相同宽度的 div 元素相同的文本，并且它在 Chrome 中工作正常，但 Firefox 在文本区域的右侧有一个白色块，它会截掉最后一个字母。

您可以在这里找到 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 的回答，我对问题添加了另一个限定条件：这个文本区域需要用 'word-wrap':'break-word' 来换行，否则整个文本点-当单词长度超过允许的最大宽度时，阴影就会丢失。

原文

I would like a textarea to display the same text as a div element of the same width, and it works fine in Chrome, but Firefox has a white block to the right of a textarea that chops off the last letter.

You can find a jsfiddle example here: http://jsfiddle.net/ngn6Y/9/
which contains the same code as below:

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());
});

Thanks!

Edit: thanks to an answer by Ionuț G. Stan below I added another qualification to the question: this textarea needs to wrap on break-word e.g. with 'word-wrap':'break-word', otherwise the whole point of text-shadowing gets lost when a word is longer than the maximum width allowed.

分享到QQ

分享到微博