有没有办法使换行符（\n）的高度小于文本的行高？

Question

I'm building a reader to display text and the text comes with \n\n characters within it, and when rendered in HTML, it makes the empty lines' heights bigger than I want. Is there a way to control the height of the empty line produced in Html, without replacing them with Html tags?

Thanks in advance.

Answer 1

You can do it by replacing empty lines with an empty HTML element:

 const text = `this is an example of multiline text. spacing between these lines is consistent, but line below will be different even multiple empty lines: will have the same height`; const div = document.getElementById("main"); div.textContent = text; div.innerHTML = div.innerHTML.replace(/([\n]{2,})/g, "<p>$1</p>"); console.log("original text length: ", text.length); console.log("text from html length: ", div.textContent.length); console.log("are both texts equal? ", div.textContent === text);

 div { white-space: pre; line-height: 2em; } p { height: 2em; margin: 0; padding: 0; border: none; line-height: 0; visibility: hidden; white-space: none; }

 <div id="main"></div>