jquery - 像标签一样的facebook-word-wrap:break-word;在FF和IE9 +上不起作用

我试图在<b>上检测到keyup时（例如#）插入Facebook。我从textarea读取，然后复制到div元素。

    <div  class="new_postAdDescription2" id="new_postAdDescription2" spellcheck='false' contenteditable='true'> </div>
    <textarea name="description" id="new_postAdDescription" spellcheck='false'
class="new_postAdDescription" cols="30" rows="10" placeholder="Posto nj&euml; shpallje" >
</textarea>

请查看我如何替换空白和换行符。我也尝试过 （顺便说一句，如果删除空白匹配，一切正常！）

$('#new_postAdDescription').keyup(function (e) {
        var str = $('#new_postAdDescription').val();

        str = str.replace(/ /g, ' ');
        str = str.replace(/\n/g, '<br/> ');

        str = str.replace(/(&#160;|<br\/> )#([a-zA-Z0-9]+)/g, "$1<b class='highlighterContent'>#$2</b>");

        $('#new_postAdDescription2').html(str);
    });

//样式

<style>
.new_postAdDescription, .new_postAdDescription2{
    position: relative;
    float: left;
    background-color: transparent;
    border: 0;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    outline: 0;
    width: 694px;
    color:#1c1c1c;
    resize: none;
    margin: 10px;
    height: 115px;
    font-size:13px;
    line-height:1.3;
    direction: ltr;
    word-wrap:break-word;
}

.new_postAdDescription2{
position:absolute;
color:transparent;
word-wrap:break-word;
direction: ltr;
text-align: left;
}
.highlighterContent{
position:relative;
font-weight:bold;
color:#333;
background-color:#f2f2f2;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

</style>

这不是最好的方法，但是它在Chrome上可以正常工作，但是在FF和IE9上，当涉及到单词破译时，它会与文本重叠并失去踪迹。看到屏幕截图

在FF和IE9中

 

在Chrome中时：

最佳答案

我确实找到了正确的答案....

新的javascript是（简单得多）：

$('#new_postAdDescription').keyup(function (e) {
    var str =$('#new_postAdDescription').val();

    str = str.replace(/\n/g, '<br>');
    str = str.replace(/#([a-zA-Z0-9]+)/g, "<b>#$1</b>");

    $('#new_postAdDescription2').html(str);
});

和在CSS：

.new_postAdDescription, .new_postAdDescription2{
    position: relative;
    float: left;
    background-color: transparent;
    border: 0;
    outline: 0;
    width: 694px;
    resize: none;
    margin: 10px;
    height: 115px;
    font-size:13px;
    line-height:1.3;
    direction: ltr;
    color:#1c1c1c;
}

.new_postAdDescription2{
    position:absolute;
    color:transparent;
    white-space: pre-wrap;
}
b{
font-weight:bold;
color:#333;
display: inline-block;
white-space: pre-wrap;
word-wrap:break-word;
direction: ltr;
text-align: left;
max-width: 100%;
}

添加空格：预包装；在正确的地方使它工作。

关于jquery - 像标签一样的facebook-word-wrap:break-word;在FF和IE9 +上不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17215976/