如何將單詞包裝到pagedown編輯器的預覽中？

-1

<div style="padding-top:20px;" class="control-group"> 
       <div class="controls"> 
        <div id="wmd-button-bar"></div> 
        <textarea class="wmd-input" id="wmd-input"></textarea> 
       </div> 
     </div> 
     <div style="padding-top:20px;" class="control-group"> 
       <div class="controls"> 
        <div id="wmd-preview" class="wmd-panel wmd-preview"></div> 
       </div> 
     </div>

我的JavaScript代碼：

(function() { 
    var converter1 = Markdown.getSanitizingConverter(); 

    converter1.hooks.chain("preBlockGamut", function (text, rbg) { 
     return text.replace(/^ {0,3}""" *\n((?:.*?\n)+?) {0,3}""" *$/gm, function (whole, inner) { 
      return "<blockquote>" + rbg(inner) + "</blockquote>\n"; 
     }); 
    }); 

    var editor1 = new Markdown.Editor(converter1); 

    editor1.run(); 

})();

我對VMD預覽CSS代碼：

.wmd-preview 
{ 
    border:2px solid #979797; 
} 

.wmd-preview 
{ 
    background-color:#E0EAF1; 
    border-bottom:1px solid #b3cee1; 
    border-right:1px solid #b3cee1; 
    padding:3px 4px 3px 4px; 
    margin:2px 2px 2px 0; 
    text-decoration:none; 
    font-size:90%; 
    line-height:2.4; 
    white-space:nowrap; 
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; 
    line-height:21px; 
    word-wrap:break-word; 
} 

.wmd-preview 
{ 
    clear:both; 
    padding:3px; 
    border:2px dotted #ccc; 
    font-size:107%; 
    line-height:130%; 
    width:660px; 
} 

.wmd-preview p 
{ 
    word-wrap:break-word; 
} 

.wmd-preview li 
{ 
    word-wrap:break-word; 
} 

.wmd-preview li pre 
{ 
    word-wrap:normal; 
} 

.wmd-preview img 
{ 
    max-width:640px; 
}

爲什麼我一直在寫INT編輯器而不改變路線，預覽會擴展其寬度，不能自動換行，我的代碼有什麼問題？

PS：我的瀏覽器是谷歌瀏覽器

來源

2013-09-30 Charles

如果你爲這個問題創建一個小提琴會幫助更多。 –

你可以嘗試去除空白：nowrap;來自您的第一個.wmd-preview類。 [demo]（http://jsbin.com/AjiBeti/1/）注意：最好不要使用相同名稱的id和class，並使用這種方式：#id，.class –

@ D.Alexander非常感謝你，現在有用！你的意思是在html代碼中，我不應該爲class和id使用相同的名稱？ – Charles

從上面的評論延伸，這裏的問題是，內部文本被設置爲永不斷線。通過從該元素中刪除white-space:nowrap;，解決了最初的問題。

查看此產品DEMO。

關於命名和樣式ID和類，通常最好避免使用兩個相同的確切字符串 - 儘管它可能成功呈現。這是由於您以後可能會在代碼中遇到可能的命名衝突，也因此您和其他人可能需要在將來某天編輯您的代碼時更具可讀性。

在上面的示例演示中，我使用了Hungarian notation（或lowerCamelCase）作爲ID和連字符類名。你可以選擇適合你的任何風格，並且有很多。看看some other naming conventions那裏，給一個嘗試。你真的很高興你做到了！

來源

2013-09-30 09:15:27

如何將單詞包裝到pagedown編輯器的預覽中？

回答

相關問題