Text Is Wrapping Under Bullet in CSS List

text is wrapping under bullet in css list

I did this on your site with firefox and it works

#menu-news li:first-of-type {
    border-top: medium none;
    height: 55px;
    list-style-position: inside;
    margin-left: 8px;
    margin-right: 15px;
    padding: 10px 10px 10px 66px;
    vertical-align: top;
}

#menu-news li {
    background: url("images/wbismall.png") no-repeat scroll 0 0 transparent;
    border-top: 1px solid #666666;
    height: 55px;
    list-style-position: inside;
    margin-left: 10px;
    margin-right: 15px;
    padding: 10px 10px 10px 66px;
}

Second line in li starts under the bullet after CSS-reset

The li tag has a property called list-style-position. This makes your bullets inside or outside the list. On default, it’s set to inside. That makes your text wrap around it. If you set it to outside, the text of your li tags will be aligned.

The downside of that is that your bullets won't be aligned with the text outside the ul. If you want to align it with the other text you can use a margin.

ul li {
    /*
     * We want the bullets outside of the list,
     * so the text is aligned. Now the actual bullet
     * is outside of the list’s container
     */
    list-style-position: outside;

    /*
     * Because the bullet is outside of the list’s
     * container, indent the list entirely
     */
    margin-left: 1em;
}

---

Edit 15th of March, 2014
Seeing people are still coming in from Google, I felt like the original answer could use some improvement

• Changed the code block to provide just the solution
• Changed the indentation unit to em’s
• Each property is applied to the ul element
• Good comments :)

Prevent text in list from wrapping under icon bullet?

add this styles set position:absolute to li:before and li position:relative

ul.fa-ul2 > li{
 position: relative;
}

ul.fa-ul2 li:before {
 position: absolute;
 left: -13px;
}

How to wrap text away from the bullet?

You can use absolute position instead of relative with negative values:

div {  width: 250px}
ul {  padding: 10px; list-style: none;}
ul>li { position:relative;}
ul>li::before {  padding-right: 10px;  position: absolute;  left:-15px;  top:-10px;  font-size: 2em;  content: "\2022";  color: #fee100;}

<div>  <ul>    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>    <li>VLorem Ipsum is simply dummy text of the printing.</li>  </ul></div>

Prevent long list item from moving below bullet

It seems like the browser sees the bullet as a word separated from the text next to it. It will then break after it if you use word-wrap: break-word; or word-break: break-word;.

The other thing you could do is use word-break: break-all;.
But then it will also break in the middle of a word for long lines (like the 2nd one), which is something we don't want.

ul {
  width: 16rem;
  border: 1px solid;
  list-style-type: disc;
  list-style-position: inside;
  padding: 0;
  margin-left: 10px;
  word-break: break-all;
}

<ul>
  <li>Ordinary Item (ok)</li>
  <li>Long Text Long Text Long Text Long Text (ok)</li>
  <li>NoSpaceNoSpaceNoSpaceNoSpaceNoSpaceNoSpace (BAD!)</li>
</ul>

Keep text in HTML list indented for wrapped lines while list-style is none

The easiest solution would be to set your li as flex containers. The asterisk and the li's content would be flex items and displayed side by side.

ul {  font-family: Roboto, Helvetica, Arial, sans-serif;  list-style: none;  padding-left: 1em;}  li {  margin-bottom: 1em;  display: flex;}    li:before {  content: "*";  margin-right: 1em;}

<ul>  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, dolor facere, architecto ut eaque eius rerum expedita optio repellat reprehenderit voluptates? A numquam voluptatum quasi quidem nisi magni aperiam quam.</li>  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, dolor facere, architecto ut eaque eius rerum expedita optio repellat reprehenderit voluptates? A numquam voluptatum quasi quidem nisi magni aperiam quam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, dolor facere, architecto ut eaque eius rerum expedita optio repellat reprehenderit voluptates? A numquam voluptatum quasi quidem nisi magni aperiam quam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, dolor facere, architecto ut eaque eius rerum expedita optio repellat reprehenderit voluptates? A numquam voluptatum quasi quidem nisi magni aperiam quam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, dolor facere, architecto ut eaque eius rerum expedita optio repellat reprehenderit voluptates? A numquam voluptatum quasi quidem nisi magni aperiam quam.</li>  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, dolor facere, architecto ut eaque eius rerum expedita optio repellat reprehenderit voluptates? A numquam voluptatum quasi quidem nisi magni aperiam quam.</li>  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, dolor facere, architecto ut eaque eius rerum expedita optio repellat reprehenderit voluptates? A numquam voluptatum quasi quidem nisi magni aperiam quam.</li>  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, dolor facere, architecto ut eaque eius rerum expedita optio repellat reprehenderit voluptates? A numquam voluptatum quasi quidem nisi magni aperiam quam.</li></ul>

---

Related Topics