I'm trying to remove the &nbsp from my strings and maintain their original position the most optimal and cleanest way in the following div form my js file

export default function Tree() {
    return (
            <div className="tree">
                mammals<br/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cheetah <br/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bear <br/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lion <br/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dog <br/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elephant <br/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ape <br/>
             
            </div>
    )
}

Would appreciate any suggestion Thank you in advance

I tried to convert each one to a span and assign a respective style according to the distance of each test but I feel there is a cleaner way to do it

CodePudding user response：

It seems like you're trying to create a nested list structure without actually using list elements. Your implementation here is extremely hacky.   should probably never be used to design your page layout, and <br> isn't being used properly here.

The HTML standard has <ul> and <li> elements built-in that allow you to create these "list-shaped" structures much easier. If you need the text to be exactly where it is in your example, these elements can be styled to adjust the indent size and remove the physical bullet points.

li {
  /* Hide bullet points */
  list-style-type: none;
}
ul {
  /* First item in the list should have no indentation */
  padding-left: 0;
}
ul ul {
  /* Subsequent items in the list should be indented by 1.3em, approx. equal to example. */
  padding-left: 1.3em;
}

<ul>
  <li>mammals</li>
  <ul>
    <li>cheetah</li>
    <li>bear</li>
    <ul>
      <li>lion</li>
      <li>dog</li>
      <ul>
        <li>elephant</li>
      </ul>
    </ul>
    <li>ape</li>
  </ul>
</ul>

CodePudding user response：

Maybe you can use the JS script to do this,I am guessing use this JSscript

let tree = document.querySelector('.tree').innerHTML;
tree = tree.replace(/ /g, '');
document.querySelector('.tree').innerHTML = tree;