Member Avatar for lailalaila

Hi everyone,

How do you make the text in bullets wrap so that the words on the following line dont begin under the bullet, but rather under the first word of the bulletted text? Should I do this in my html text doc (in the <li></li> tags) or in a css doc? I've never been able to figure this out. Please help. Thanks!

laila

  • 3 Contributors
  • 4 Replies
  • 484 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Short answer: fix it in CSS — the browser will normally place the marker in the left “gutter” so wrapped lines line up under the first word, but styling on the list or its container can break that. — this is a presentation issue, so keep the markup simple and handle it in your stylesheet. and were right to look at marker placement and container spacing; the usual causes are a CSS reset, explicit left padding/margin on the UL/parent, or changing the display of the LI.

Debug checklist (fast):

  • Check the page DOCTYPE (no DOCTYPE or quirks mode changes default list behavior).
  • Use the browser inspector to view computed styles for the UL and LI (look for unexpected left padding/margin or display values).
  • Temporarily disable your reset/author rules to see whether the UA defaults produce the desired wrap.
  • If LIs are floated, inline-block, or absolutely positioned, the wrap will be affected.

If you want full control and a consistent hanging indent across browsers, create the marker yourself with a pseudo-element and keep the text block indented. Example (add a class to the UL):

ul.hang { list-style: none; padding-left: 1.4em; margin: 0; }
ul.hang li { position: relative; }
ul.hang li::before { content: "\2022"; position: absolute; left: 0; top: .2em; font-size: 1em; }

This places a glyph in the gutter while the LI text sits in a padded block so wrapped lines align under the text. Notes: avoid zeroing-out the list gutter globally unless you recreate it (resets that set all list margin/padding to 0 are a common root cause). For modern browsers you can also look at the ::marker hook for simpler styling, but the pseudo-element approach above is widely compatible.

Recommended Answers

All 4 Replies

Member Avatar for autocrat

Hmm - dam good question.

I tought that they would automatically be "seperate"...

If you can, think of it as two seperate table cells... I always thought the bullet was in the left one, the text in the right...

Where as you are saying you see the bullet, you have a space, then the text... which wraps round and causes the text to continue on the line below, satarting from the bullet ?


Well - I cannot say I've ever encountered this... but try...

UL
{list-style-position: inside;}

The only thing I can think of is that you hae somehow applied different formatting else where and it is overiding.

If that doesn't help, come back and paste some of the code (or link to the page).

Member Avatar for MidiMagic

It should automatically happen that way.

BUT

If you apply any overall or left margin, border, or padding style to the text in the UL list, or to a containing item, it will cause the automatic indenting to fall apart in most browsers.

Use of

list-style-position: inside;

forces the bullets to be in the paragraph, instead of separate. Use this instead:

list-style-position: outside;
Member Avatar for lailalaila

thanks to you both...still working at it, but i'm not quite sure what i'm missing. :)

Member Avatar for MidiMagic

You have to remove all margin, border, and padding style to get the bulleted list to display properly. This includes containing objects with styles.

Or put the following style in:

li {padding: 0;
    border: none;
    margin: 0;
    list-style-position: inside;}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.