Question

我无法解决内容未按要求呈现的provemath上的问题。

问题是书面内容中的每一行（第一行除外）都包含在<div>中。例如，内容

line1.
line2.

通过Safari Web检查器可以看到的

实际上呈现为<p>line1.<div>line2.</div></p>。 DESIRED输出为<p>line1.<br>line2.</p>。

有一些事情可以在这里发挥作用......

我不确定浏览器如何处理输入的换行符。
我的内容呈现功能（包含在下面）运行Markdown（实际上是marked）和一些正则表达式。
CSS（包含在下面）操纵某些内容的显示方式，我想知道它是否会导致HTML本身发生变化。我之前认为使用flexbox导致了这种情况，但我改变了CSS无济于事。

内容呈现如下：

内容由用户输入（点击RETURN换行）并使用jQuery的.html函数

blind.value = $value.html()

获取内容，然后使用

function render_content(string) {
    // make all \ into \\ instead, so that they will be \ again when marked is done. This is for MathJax postrender compatability.
    string = string.replace(/\\/g, '\\\\')
    string = string.replace(/\n/g, '<br />') // not doing anything AFAIK
    string = marked(string)

    string = string.replace(/img(\d+)/g, '<img src="image/$1.jpg" />')
    string = string.replace(/\\includegraphics\{(.*?)\}/g, '<img src="image/$1.jpg" />')

    return string
}

CSS如下：

    .value {
        // display: inline-flex;
        display: inline;
        // flex-direction: column;
        vertical-align: top;
        width: 85%;
    }

你可以看到旧的CSS被注释掉了。

Answer 1

为什么要处理＆＃39;反斜杠＆＃39;之前＆＃39;换行＆＃39;？你试过这个吗？

string = string.replace(/\n/g, '<br />')
string = string.replace(/\\/g, '\\\\')
string = marked(string)

Answer 2

尝试在div中包装两行，然后使用css网格根据需要渲染它们。这是记录css网格的a link。

Answer 3

为了得到答案，解决方案是使用正则表达式删除某些浏览器添加的<div>和</div>的出现次数。

由于用户输入被转义，这不会与用户手动输入“”混淆，因为用户输入会导致HTML转义字符串（并且不会产生div，只会产生说“”的文本）。

每行内容都包含在div中

3 个答案: