如何将单词包装到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编辑器的预览中？

回答

相关问题