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：赞赏替代，更整洁，更简洁等问题！

突出显示第一段明文

1 个答案: