Say I have some display: block container and I want to populate it (programmatically) with display: inline elements like <span> tags. Each of these elements should be treated like a "word", so when they reach the right edge of the parent element, they should wrap by having a line break inserted before the element that would otherwise overflow to the right.

I can do this in hand-written HTML by putting a space after each element. When populating the parent programmatically, this is a bit annoying and messy since I have to start dealing with the actual text content of the parent instead of just popping and inserting nodes (assume I may need to programmatically remove and insert nodes in any order).

I'm sort of hoping there's a CSS property for the parent that says "treat the end of any element like whitespace for the purposes of element flow", but I'll take any clean solution.

Here are some examples of what I want (screenshot). The snippet contains to div tags. The first is behaving the way I want, but achieved in a way I don't want (just putting whitespace between the spans in the HTML). The second is not behaving how I want - since there's no whitespace between the spans, the browser won't linebreak between them.

div { width: 200px; background-color: pink; margin-bottom: 10px; }
span { width: 80px; background-color: cyan; }

<div>
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>
</div>

<div><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span></div>

CodePudding user response：

One way to achieve the desired behavior without having to insert spaces between the span tags is to set the display property of the parent container to flex, and the flex-wrap property to wrap. This will cause the child elements to wrap to the next line when they reach the edge of the parent container, just like you're looking for.

You can also use inline-block instead of inline as this is going to treat the element like an inline element but also respecting the width and height set on the element.

div { 
    width: 300px; 
    background-color: pink; 
    display: flex; 
    flex-wrap: wrap; 
}

span { 
    width: 80px; 
    background-color: cyan; 
    display:inline-block
}

<div>
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>
</div>

<div><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span></div>

You can then insert and remove span elements programmatically and they will still wrap to the next line as desired.

CodePudding user response：

Here are 2 ideas that might work for you:

1. Either work with css by using flex adding padding to the <span>'s
2. Or if you only need a single space, you could simply append your <span>'s with a space before/after

// Second Example
for (let i = 0; i < 8; i  ) {
  const element = document.querySelector('.parent-2');
  element.innerHTML = element.innerHTML   " <span>text</span>"
}

/* First Example */
.parent-1 {
  display: flex;
  flex-flow: row wrap;
}

.parent-1 span {
  padding-right: 4px;
}

.parent {
  width: 200px;
  border: 1px solid red;
  margin-bottom: 10px;
}

<!-- First Example -->
<div ><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span></div>

<!-- Second Example -->
<div ></div>