Unordered list items second line, line-height

4214 views html
0

I have an unordered list in a narrow space. When the first (or could be any line) wraps to second line, the line height is the same as between the list items. I want it to be a little less between lines. In other words...

I want this:

• Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah

• Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah

not...

• Blah blah blah Blah blah blah Blah blah blah

Blah blah blah Blah blah blah Blah blah blah

• Blah blah blah Blah blah blah Blah blah blah

Blah blah blah Blah blah blah Blah blah blah

I hope that makes sense. I could put a line break between list items but that's too much space and on a larger screen it is not going to wrap anyway.

answered question

Well that doesn't show what I mean .... I want more space between bullets.

3 Answers

12

In your css file you can use: li { white-space: nowrap; }

But this will cause the text to overflow horizontally if there is no space

posted this
2

You could add margin-bottom or padding-bottom (or -top) to your li items.

E.g.,

ul li { margin-bottom: ... }
ul li:last-child { margin-bottom: 0 }

(Hard to say more without context)

posted this
8

You can add margin-top to li

.a{
  width: 150px;
}

li{
 margin-top: 10px;
}
<div class="a">
  <ul>
    <li>kwuh wgriu rgoib ergo</li>
    <li>kwuh wgriu rgoib ergo</li>
    <li>kwuh wgriu rgoib ergo</li>
  </ul>
</div>

posted this

Have an answer?

JD

Please login first before posting an answer.