Why there is a line-break after ul>li elements?

[joisun]

The margin of ul/ol>li (and all other elements) doesn't looks as expected.

while check the css of ul/ol and li , they are looks right:

ul/ol:

li:

But when I select the text, there seems a line-break after each li elements and all other elements:

How should I solve this problem? And what i did was just simple:

marked.parse(#the markdown content#)

and the content is:

 | Displayed on screen 🖥️
 | /dɪˈspleɪbt ɒn skriːn/
 | verb

**Definition:** To show or make something visible on a computer, television, or other electronic device's screen.

**Example sentences:**
1. The presentation was displayed on the big screen for everyone to see. 📊🖥️
2. She clicked on the video link, and it started displaying on her phone screen. 📱🎥
3. The website has been updated, and the new design is now displayed on screen. 💻🎨

Thanks a lot :)

[UziTech]

My guess is that it is your css that adds the margin. marked does not provide css. It looks fine in the demo

[UziTech]

By your css I don't mean custom css. If you are using tailwind it must be tailwind that is adding the margin.

parseInline won't create block markdown like lists. so the 1. ... 2. ... 3. ... is text not an html list.

[joisun]

By your css I don't mean custom css. If you are using tailwind it must be tailwind that is adding the margin.

parseInline won't create block markdown like lists. so the 1. ... 2. ... 3. ... is text not an html list.

Thanks for the notice, and I just tried to create a minor reproduction stackblitz, Things works as expected。

But In my local code base, If I keep everything the simplest, which the html structure is:

           <div >
              <div
                className=""
                dangerouslySetInnerHTML={{ __html: htmlContent as string }} // 动态渲染的 HTML
              />
            </div>

the page shows like:

The point is I try to findout what css setting might effected this, I couldn't.

Thanks for your time, This project is a browser extension, so It might not convenient to reproduce for other people, that's what makes me feel embarrassed, do you have any adivese for me to troubleshoot this problem? appreciate : )

[UziTech]

I don't know much about tailwind. I would try removing css properties one by one to see which ones in tailwind add the margin. Or you could try adding custom css that overrides the margin.

[joisun]

I finally foundout the point, I add a style for the continer whitespace-break-spaces which has been inheritted.

Thanks a lot !