list style when text is too long , how to adjust the second line?

user_11622509 0
Viewed 93

i'm new on web development and i encounter a problem. I'm designing a mobile website and the list text is too long and it breaks to a second line, so i want to adjust the second line to the level where the text starts. I'm using bootstrap 5

at the moment my list looks like this actual

i want it to look like this wanted

HTML

        <div class="col">
          
          <ul>
            <p class="col align-self-center">
            <li><i class="fa-solid fa-fish"></i>5% marketing and strategic alliances</li> 
            <li><i class="fa-solid fa-fish"></i>10% Metadata release (Rarity tools) Focus on community growth</li>
            <li><i class="fa-solid fa-fish"></i>25% Listing in Magic Eden</li> 
            <li><i class="fa-solid fa-fish"></i>50% First Donation to partners</li> 
            <li><i class="fa-solid fa-fish"></i>65% Increase in marketing investment</li> 
            <li><i class="fa-solid fa-fish"></i>80% Bluepaper Publication of Phase 2</li> 
            <li><i class="fa-solid fa-fish"></i>100% Second Donation to partners</li> 
            </p>
          </ul>
        </div>
  
      </div>

CSS

  .Roadmap-body li {
      list-style: outside;
      padding: 0% 0% 5% 0%;
      text-align: left;    
      width: 100%; 
        margin-left: auto; 
        margin-right: auto; 
 
    }

    .fa-fish{
      padding-right:  7%;
    }

thank you by advance everyone !

EDIT i change the ui tag to ul and now looks like this enter image description here

bootstrap-5 frontend list css html
2 Answers

You can use display: inline-flex for all li tags. But note that this will cause the bullets to be removed.

However, if you want to have the icon with the bullets, you can use the following example.

.parent > li{
  display: inline-flex;
}
.fixed-icon{
  background:red;
  white-space: nowrap;
  margin: 4px;
  position: relative;
}
.fixed-icon::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 100%;
  position: absolute;
  left: -13px;
  top: 5px;
}
<ul class="parent">
  <li>
    <i class="fa-solid fa-fish fixed-icon">Icon 1</i>
    Lorem ipsum dolor sit amet
  </li>
  <li>
    <i class="fa-solid fa-fish fixed-icon">Icon 2</i>Lorem ipsum dolor sit
    amet, consectetur adipiscing elit
  </li>
</ul>

user_102672490

Dealing with tables is not always easy when it comes to content alignment. You could, instead, use a Flexbox solution that'll allow you to align content more freely, as well as have your line break problem solved.

Here's the HTML for it:

<div class="test-container">
    <div class="test-item">
        <i class="fa-solid fa-circle-small"></i>
        <i class="fa-solid fa-fish"></i>
        <p>5% marketing and strategic alliances</p>
    </div>
    <div class="test-item">
        <i class="fa-solid fa-circle-small"></i>
        <i class="fa-solid fa-fish"></i>
        <p>10% Metadata release (Rarity tools) Focus on community growth</p>
    </div>
    <div class="test-item">
        <i class="fa-solid fa-circle-small"></i>
        <i class="fa-solid fa-fish"></i>
        <p>25% Listing in Magic Eden</p>
    </div>
    <div class="test-item">
        <i class="fa-solid fa-circle-small"></i>
        <i class="fa-solid fa-fish"></i>
        <p>50% First Donation to partners</p>
    </div>
    <div class="test-item">
        <i class="fa-solid fa-circle-small"></i>
        <i class="fa-solid fa-fish"></i>
        <p>65% Increase in marketing investment</p>
    </div>
    <div class="test-item">
        <i class="fa-solid fa-circle-small"></i>
        <i class="fa-solid fa-fish"></i>
        <p>80% Bluepaper Publication of Phase 2</p>
    </div>
    <div class="test-item">
        <i class="fa-solid fa-circle-small"></i>
        <i class="fa-solid fa-fish"></i>
        <p>100% Second Donation to partners</p>
    </div>
</div>

And here's the CSS:

.fa-fish{
    margin: 0 10px;
}

.test-item {
    display: flex;
    align-items: center;
}

This is a very basic solution, but you should be able to improve it with minor CSS and HTML tweaks. Also, please note that I've used a Font Awesome small circle icon to mimic the list item bullet points. I do not know if this is a valid approach, but there it is anyway. Hope it helps!

user_117947120
Related