每行内容都包含在div中

Question

我无法在tesmath上解决问题,因为内容未按要求呈现.

问题是书面内容中的每一行(第一行除外)都包含在<div>.例如,内容

line1.
line2.

通过Safari可以看到Web检查器实际上呈现为<p>line1.<div>line2.</div></p>.渴望的输出是<p>line1.<br>line2.</p>.

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

1. 我不确定浏览器如何处理输入的换行符.
2. 我的内容呈现功能(包括在下面)运行Markdown(实际上,标记)和一些正则表达式.
3. 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

尝试将这两行包装在 div 中，然后使用 css grid 根据需要渲染它们。这是一个记录 css 网格的链接。