-1

我的html代码

    <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-preview 的 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;
}

为什么我一直在编辑器中写入而不更改行，预览将扩展其宽度并且无法自动换行，我的代码有什么问题？

PS：我的浏览器是谷歌浏览器

4

1 回答 1

0

从上面的评论延伸，这里的问题是内部文本被设置为永不中断。只需white-space:nowrap;从该元素中删除，就可以解决最初的问题。

查看此演示。

关于命名和样式 ID 和类，通常最好的做法是避免对两者使用完全相同的字符串 - 即使它可能会成功呈现。这是因为您以后可能会在代码中遇到命名冲突，但也因此对于您和其他可能需要在某一天编辑您的代码的人来说更具可读性。

在上面的示例演示中，我使用匈牙利表示法（或 lowerCamelCase）来表示 ID 和带连字符的类名。你可以选择任何适合你的风格，而且有很多。查看其他一些命名约定并尝试一下。你真的会很高兴你做到了！

于 2013-09-30T09:15:27.980 回答