像标签一样的facebook-word-wrap:break-word;在FF和IE9 +上不起作用 [英] facebook like hashtags - word-wrap:break-word; doesnt work on FF and IE9+

问题描述

我试图在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>
.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上，当涉及到破坏单词时，它会与文本重叠并失去踪迹.看到屏幕截图

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

和inss中的

.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%;
}

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

I'm trying to insert a <b> whenever on keyup, a # is detected (like Facebook). I read from the textarea, and copy to a div element.

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

Please see how I replace white spaces and new lines. I have tried   as well (btw here, if I remove white space matching, everything works fine!)

$('#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>

It's not the best, but it works fine with Chrome, but on FF and IE9, when it comes to breaking the word, it overlaps text and loses track. see screen shot

in FF and IE9

while in Chrome:

解决方案

i did figure it out the right answer....

the new javascript is (much simpler):

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

and the in 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%;
}

adding white-space: pre-wrap; at the right place made it work.

这篇关于像标签一样的facebook-word-wrap:break-word;在FF和IE9 +上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！