How to make an inline <span> go to the next line when one of them is to wide?-CodePudding

I'm using bootstrap badges and I'm struggling to get all the <span> elements to appear on the next line below when they get to large.

My Page current looks like this in mobile:

Joe Bloggs

(Bigger Badge)

Joe Bloggs Brother (SMALL BADGE)

How do I configure this so when the <span> element movest the others do to.

My Code:

<span > {{ displayusernames(user.names) }} </span>

I've tried using pseudo-elements to get this working but I can only get it effect one of the elements and not both.

CodePudding user response：

You should add either a custom class including white-space: pre. That will make an element not linebreak but move completely to a new line instead. Bootstrap-5 class for it is text-nowrap:

div {
  border: 2px dashed red;
  width: 7em;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>


<div>
  <span>0 1 2 3 4</span>
  <span >5 6 7 8 9</span>
</div>

CodePudding user response：

to do this you can use this CSS :

.UserNameBadges {
  word-break: break-all;
  display: inline-block;
  max-width: 150px;
}

The 'display: inline-block' property makes the '' element behave like an inline element with the ability to set width and height properties. The 'max-width: 150px' property sets a maximum width of 150 pixels for the '' element, so if the text within it exceeds this width, it will wrap to the next line. The 'word-break: break-all' property ensures that the text will wrap whenever it reaches the end of its container.

CodePudding user response：

The way I did this is within in the css. I made it so when the display gets so small I display the span as a block and to fit-content.

Looked like so:

@media (max-width:660px)  {
    .UserNameBadges {
        display: block;
        width: fit-content;
    }

}