facebook喜欢hashtags word-wrap:break-word；在FF和IE9+上不起作用

Question

每当在keyup上检测到#时，我都会尝试插入<b> (如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

<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中

​

​

Answer 1

我确实想出了正确的答案...

新的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%;
}

添加空格:预包装；在正确的位置使其工作。