Internet Explorer 在 textareas 中包装的单词与 div 不同答案

【问题标题】：Internet explorer wrapping words different in textareas than divsInternet Explorer 在 textareas 中包装的单词与 div 不同
【发布时间】：2014-07-31 05:08:49
【问题描述】：

在 Internet Explorer（在 IE10 中测试）中，它看起来像在文本区域内，单词后面的空格在换行时被视为单词本身的一部分。请参考以下图片：

在左侧，您会看到 textarea，在右侧，您会看到与 textarea 内容相同的 div。在第一张图片中，正如预期的那样，“vero”这个词很适合“voluptua”这一行。然后在添加另一个单词（甚至只是一个空格）之后，“vero”出现在新行上。但仅在文本区域中，而不是在 div 中。我想计算文本区域的高度，所以对我来说很重要的是，自动换行/分断行为是相同的。

我已经尝试为 textarea 和 div 赋予相同的自动换行、空白、换行、-ms-word-break、word-break 和 -ms-hyphens 属性，但没有任何积极的结果。

有没有人必须处理这个问题并找到解决方法？

【问题讨论】：

标签： html css internet-explorer word-wrap

【解决方案1】：

$(function() {  
    var txt = $('#comments'),  
        hiddenDiv = $(document.createElement('div')),  
        content = null;  

    txt.addClass('txtstuff');  
    hiddenDiv.addClass('hiddendiv common');  

    $('body').append(hiddenDiv);  

    txt.on('keyup', function () {  

        content = $(this).val();  

        content = content.replace(/\n/g, '<br>');  
        hiddenDiv.html(content + '<br class="lbr">');  

        $(this).css('height', hiddenDiv.height());  

    });  
});

CSS：

        textarea {  
        width: 500px;  
        min-height: 50px;  
        font-family: Arial, sans-serif;  
        font-size: 13px;  
        color: #444;  
        padding: 5px;  
    }  

    .noscroll {  
        overflow: hidden;  
    }  

.hiddendiv {  
    display: none;  
    white-space: pre-wrap;  
    width: 500px;  
    min-height: 50px;  
    font-family: Arial, sans-serif;  
    font-size: 13px;  
    padding: 5px;  
    word-wrap: break-word;  
}

【讨论】：