javascript - 突出显示明文的第一段

Question

我的应用程序使用换行符保存纯文本，例如

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Suspendisse porttitor mauris cursus neque vehicula scelerisque. 

Proin eget euismod purus

显示此数据时，我确保使用 css 保留换行符:

//  Sequences of whitespace will collapse into a single whitespace. 
// Text will wrap when necessary, and on line breaks
white-space: pre-line;

是否可以用 css 突出显示第一段，即第一个换行符之前的所有文本？

我的想法类似于 p:first-of-type { font-weight: bold };...只是这里没有 p 元素。这可能吗？

Answer 1

进一步思考这个问题，一种可能的解决方案是添加 <p>手动标记明文，使用 JS/TS 检测换行符:

// convert plaintext-lines to paragraph-elements
convertPlaintextToParagraphs( text: string ) {

    // convert plaintext to array
    // by using line-breaks as element-separators
    let lines: string[] = text.split('\n');

    // add <p> tags to each array-element
    let textWithParagraphs: string = ""; 
    lines.forEach( paragraph => {
         textWithParagraphs += "<p>" + paragraph + "</p>";
    });

    // return result
    return textWithParagraphs;
}

然后这允许使用 CSS 突出第一个 <p> :

p:first-of-type {
    font-weight: bold;
}

PS:替代、更简洁、更简洁等答案表示赞赏!