display: inline-flex; AND flex-wrap:wrap; doesn’t fill previous line of text

问题

I need to use display: inline-flex; AND flex-wrap: wrap;. These two values of flexbox I think are blocking each other. Each sentence is wrapped in span inside flexbox. If the sentence is short enough, it will be displayed next to another sentence like I want, but still following sentence won't fill the remaining space.

What I want to achieve:

My current code:

.aligment {
    align-items: flex-start;
    display: inline-flex;
    flex-wrap: wrap;
    white-space: normal !important;
}

<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
    </head>
    <body>
        <div class="aligment">
            <span>1.Wihu kw jw kwjew we wekjwe w.</span>
            <span>2.Wewewe jwe k ew k.</span>
            <span>3.Wew w ew wl we/ wewe we we we we we we w we we.</span>
            <span>4.We we we wew ewe.</span>
            <span>5.Weeeeeeeeeeeeeeeeeeeeeee w ew ewe w ewe we w ew we we we we we we w ew wew w ew ew ew ew ew ew ewew ewe we ew w ewe w ew w e.</span>
            <span>6.Wewewewe scawewe or.</span>
            <span>7.Wewe we we </span>
            <span>8.We we we </span>
        </div>
    </body>
</html>

Before I connect the CSS the text is displayed like I wanted, breaking at full sentences and filling the spaces. After I connect .css file, the sentence is not breaking until their width is 100%.

white-space: normal !important; doesn’t work as well or basically anything I found. Maybe min-width is the answer but I haven’t figured out how to make it working. I know that this problem appears because inline-flex treats sentences really as blocks not lines.

Any ideas using css, javascript or html?

Maybe it is so obvious that no one before had problems with it, but I have and I can’t find a working solution. For example these doesn’t work: How to specify line breaks in a multi-line flexbox layout?

回答1:

Not sure if i totally understood, here is a possible approach via grid and javascript , where each words are wrapped into a tag from which we get the width to keep the largest as reference, then the sentence's container is removed virtually from the dom via dispaly:contents to keep the word a direct child of the grid.

https://codepen.io/gc-nomade/pen/VwKYKdj (the script needs to be optimized, but it's the basic idea.)

const sentence = document.querySelectorAll(".aligment > span");
let box = document.querySelector(".aligment");
let varCellWidth = "0";
for (i = 0; i < sentence.length; i++) {
  const words = sentence[i].textContent
    .trim()
    .split(" ")
    .map((s, i) => {
      return `<i>${s}</i>`;
    })
    .join("");
  let CellWidth = document.querySelectorAll(".aligment > span > i");

  for (ii = 0; ii < CellWidth.length; ii++) {

    let newWidth = CellWidth[ii].offsetWidth;
    let oldWidth = window.getComputedStyle(box, null).getPropertyValue("--CellWidth");
    if (oldWidth < newWidth) {
      box.style.setProperty('--CellWidth', newWidth);
    }
  }
  sentence[i].innerHTML = words;
  if (i == sentence.length - 1) {
    box.style.setProperty('--marginI', "0"); // no need to retrieve width anymore, they can spread the whole cell at this point
  }
}

.aligment {
  --CellWidth: 5;
  --MarginI: auto;
  display: grid;
  border: 1px solid #000;
  grid-template-columns: repeat(auto-fill, minmax( calc( var(--CellWidth) * 1px), 1fr));
  border: solid;
}

.aligment>span {
  display: contents;
  border: solid;
}

i {
  margin: var(--marginI, auto);
  border: solid 1px gray;
  background: #4472c4;
  color: white;
  text-indent:0.5em;
}

span:nth-child(5n - 1) i{
  background: #c65911;
}

span:nth-child(5n) i {
  background: #548235;
  color: white
}

span:nth-child(5n + 1) i {
  background: #ffd966;
  color: black;
}

span:nth-child(5n + 2) i {
  background: #111;
}

<div class="aligment">
  <span>1. Wihu kw jw kwjew we wekjwe w.</span>
  <span>2. Wewewe jwe k ew k.</span>
  <span>3. Wew w ew wl we/ wewe we we we we we we w we we.</span>
  <span>4. We we we wew ewe.</span>
  <span>5. Weeeeeeeeeeeeeeee w ew ewe w ewe we w ew we we we we we we w ew wew w ew ew ew ew ew ew ewew ewe we ew w ewe w ew w e.</span>
  <span>6. Wewewewe 
    scawewe or.</span>
  <span>7. Wewe we we </span>
  <span>8. We we we </span>
  <span>9. We we we </span>
</div>

and flex https://codepen.io/gc-nomade/pen/VwKYmZp (this one looks alike an excel sheet ...)

const sentence = document.querySelectorAll(".aligment > span");
let box = document.querySelector(".aligment");
let varCellWidth = "0";
for (i = 0; i < sentence.length; i++) {
  const words = sentence[i].textContent
    .trim()
    .split(" ")
    .map((s, i) => {
      return `<i>${s}</i>`;
    })
    .join("");
  let CellWidth = document.querySelectorAll(".aligment > span > i");

  for (ii = 0; ii < CellWidth.length; ii++) {

    let newWidth = CellWidth[ii].offsetWidth;
    let oldWidth = window.getComputedStyle(document.body, null).getPropertyValue("--CellWidth");
    if (oldWidth < newWidth) {
      document.body.style.setProperty('--CellWidth', newWidth);
    }
  }
  sentence[i].innerHTML = words;
  if (i == sentence.length - 1) {
    box.style.setProperty('--marginI', "0"); // no need to retrieve width anymore, they can spread the whole cell at this point
    box.style.setProperty('--flexD', "row");
  }
}

.aligment {
  --MarginI: auto;
  display: flex;
  border: 1px solid #000;
  flex-wrap: wrap;
  flex-direction: var(--flexD, column);
  border: solid;
  margin: calc(var(--CellWidth) * 1px / 2) calc(var(--CellWidth) * 1px);
}

.aligment>span {
  display: contents;
  border: solid;
}

i {
  margin: var(--marginI, auto);
  border: solid 1px gray;
  background: #4472c4;
  color: white;
  text-indent: 0.5em;
  flex:1 0 calc(var(--CellWidth) * 1px);
}

span:nth-child(5n - 1) i {
  background: #c65911;
}

span:nth-child(5n) i {
  background: #548235;
  color: white;
}

span:nth-child(5n + 1) i {
  background: #ffd966;
  color: black;
}

span:nth-child(5n + 2) i {
  background: #111;
}

<div class="aligment">
  <span>1. Wihu kw jw kwjew we wekjwe w.</span>
  <span>2. Wewewe jwe k ew k.</span>
  <span>3. Wew w ew wl we/ wewe we we we we we we w we we.</span>

  <span>4. We we we wew ewe.</span>
  <span>5. Weeeeeeeeeeeeeeee w ew ewe w ewe we w ew we we we we we we w ew wew w ew ew ew ew ew ew ewew ewe we ew w ewe w ew w e.</span>
  <span>6. Wewewewe 
    scawewe or.</span>
  <span>7. Wewe we we </span>
  <span>8. We we we </span>
  <span>9. We we we </span>
</div>

来源：https://stackoverflow.com/questions/65048582/display-inline-flex-and-flex-wrapwrap-doesn-t-fill-previous-line-of-text

标签

html

css

flexbox