<span> not starting where it starts where I want it to on new line

user_15015578 0
Viewed 59

In the image you can see that if the title of the sidebar link is too long it goes to the next line. However it starts where the icon is located and not where the start of the span is. How would I style the class "side-nav-item" to where it will format where Administrator when it is shifted to the new line it starts where Give is.

<li class="side-nav-item">
  <a data-bs-toggle="collapse" href="#userAccess" aria-expanded="false" aria-controls="userAccess"
      class="side-nav-link">
      <i class="uil-layer-group"></i>
      <span>User Access</span>
      <span class="menu-arrow"></span>
  </a>
  <div class="collapse" id="userAccess" data-bs-parent="#accordion">
      <ul>
          <li class="side-nav-item">
              <a href="/task/add-location-access" class="side-nav-link">
                  <i class="uil-shield-check"></i>
                  <span> Give user access - Administrator</span>
              </a>
          </li>
          <li class="side-nav-item">
              <a href="/task/remove-location-access" class="side-nav-link">
                  <i class="uil-shield-slash"></i>
                  <span> Remove</span>
              </a>
          </li>
      </ul>
  </div>
</li>

enter image description here

css html
2 Answers

Style <span> inside <a></a> as an inline-block. The behaviour you are seeing is expected from inline elements like <span> and <i>. Checkout concepts of inline elements, block elements and 'display' property in CSS. I am assuming you are new to HTML and CSS, so I suggest you begin with a good hands on video tutorial.

user_181919810

try this ,

<span
  style="width:400px;text-align:start;height:max-content;"
> 
   Give user access - Administrator
</span>
user_151162070
Related