line break inside a list item generates space between the lines

I want to break line <br/> inside a <li> Like:

• First line

  开发者_如何学运维 second line

• Second li
• third li

but when doing so (both labels)- I get a space between them. margin and padding is 0 but still I get it.. any idea how to get rid of it? Thanks!

This is a simple solution...

by adding a <br/><br/> in your <li> will add a blank line break directly underneath

<ul>
    <li>Line 1<br/><br/></li>
    <li>Line 2</li>
    <li>Line 3</li>
    <li>Line 4<br/><br/></li>
    <li>Line 5</li>
</ul>

You can alter the line-height property in your css. Does that help ?

For future people who end up on this question like me: adding white-space: pre-wrap; to the <ul> worked for me! It also works with \n as an added bonus :)

ul {
  white-space: pre-wrap;
}

As a side note for Wordpress,   and <br /> will be automatically removed if present before the closing </li>.

In a hacky way, you can use a zero-width non-joiner (‌) or an invisible separator (⁣).

In text mode, do a carriage return and insert a ‌ before the closing </li>.

Example:

<ul>
  <li>List item with a blank line below
  &zwnj;</li>
  <li>List item</li>
</ul>

  <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>





  Coffee
    - black hot drink
  Milk
    - white cold drink 

hope This may Help..

Try This

<ul>
    <li>First Line</br>First Second Line</li>
    <li>Second Line</li>
</ul>

Check This

Try using

li{
    float: none;
}

An improvement on Rudrik's Answer:

<UL>
   <LI>First Line
      <DD>Second Line</DD> <!-- No Space -->
   </LI>
   <LI>Third Line</LI>
   <LI>Fourth Line</LI>
</UL>

Word!

Try playing around with "line-height".

Might this work for you?

<ul>
    <li><div>First line</div> second line</li>
    <li>Second li</li>
    <li>third li</li>
</ul>

Using inline CSS, create a division with a fixed height, but no content, to create an empty line between list items, just like using nested lists. If you don't know much about CSS, just copy this solution and edit the height (in pixels) to change the empty line height. Place an empty line with this code anywhere in the lists, and set whatever height you desire for each empty line created.:

<ul>
    <li>Line 1</li>
    <li>Line 2</li>
    <li>Line 3</li>
    <li>Line 4
       <div style="height: 10px;">
       </div>
    </li>
    <li>Line 5</li>
</ul>

Try this;

/* CSS */

#keyskills:after {
content:"I.T. – data analytical, planning, design and interaction skills \A Data logging and reporting - averaging about 60 WPM \A Research skills, able to provide intermediate I.T. support ";
white-space: pre;

}

/* Body of HTML */

<p id="keyskills">

Try using flex as well as flex-direction. It worked for me.

Add a paragraph with the line break:

<li>
  <p>...</br></p>
</li>

Maybe this would be helpfull

ul {
  list-style-position: outside;
}