显示:inline-flex;AND flex-wrap:wrap;没有填充上一行文字 [英] display: inline-flex; AND flex-wrap:wrap; doesn’t fill previous line of text

问题描述

我需要使用 display:inline-flex; 和 flex-wrap:wrap; .我认为flexbox的这两个值相互阻塞.每个句子都包裹在flexbox的span中.如果该句子足够短，它将像我想要的那样显示在另一个句子旁边，但是仍然紧随其后的句子将不会填充剩余的空间.

我要实现的目标:

我当前的代码:

  .aligment {align-items:flex-start;显示:inline-flex;flex-wrap:包装;空白:正常！重要；}  

 < html>< head>< meta charset ="utf-8"/>< title> test</title></head><身体>< div class ="aligment">< span> 1.< span> 2.< span> 3.我们/我们/我们/我们/我们/我们/我们< span> 4.We we we we e ewe.</span>< span> 5.Weeeeeeeeeeeeeeeeeeeeeeeee，我们，我们，我们，我们，我们，我们，我们，我们，我们，我们，我们.< span> 6.Wewewewe scawewe或.< span> 7.Wewe我们我们</span>< span> 8.我们我们</span></div></body></html>  

在连接CSS之前，文本会按照我的意愿显示，包括完整的句子并填充空格.连接.css文件后，句子的宽度直到其宽度为100％时才会中断.

空白:正常！important; 不能正常运行，或者基本上找不到我发现的任何内容.也许 min-width 是答案，但是我还没有弄清楚如何使其有效.我知道出现此问题是因为inline-flex确实将句子视为块而不是行.

有使用CSS，JavaScript或html的想法吗?

也许很明显，以前没有人遇到过问题，但是我遇到了，我找不到可行的解决方案.例如，这些方法不起作用:如何在多行flexbox布局中指定换行符?

解决方案

不确定我是否完全理解，这是一种通过grid和javascript的可能方法，其中每个单词都包裹在一个标签中，由此我们可以保持宽度最大的参考，然后通过dispaly:contents将句子的容器从dom中移除，以使单词成为网格的直接子代.

https://codepen.io/gc-nomade/pen/VwKYKdj (脚本需要优化，但这是基本思想.)

  const句子= document.querySelectorAll(.aligment> span");让框= document.querySelector(.aligment");让varCellWidth ="0";对于(i = 0; i<句子长度; i ++){常量单词=句子[i] .textContent.修剪().分裂(" ").map((s，i)=> {返回`< i> $ {s}</i>`;}).加入("");让CellWidth = document.querySelectorAll(.aligment> span> i");对于(ii = 0; ii< CellWidth.length; ii ++){让newWidth = CellWidth [ii] .offsetWidth;让oldWidth = window.getComputedStyle(box，null).getPropertyValue(-CellWidth");如果(oldWidth< newWidth){box.style.setProperty('-CellWidth'，newWidth);}}句子[i] .innerHTML =单词；如果(i ==句子长度-1){box.style.setProperty('-marginI'，"0");//不再需要获取宽度，此时它们可以散布整个单元格}}  

  .aligment {--CellWidth:5;-MarginI:自动；显示:网格；边框:1px实线#000；grid-template-columns:repeat(自动填充，minmax(calc(var(-CellWidth)* 1px)，1fr));边框:实心；}.aligment> span {显示内容边框:实心；}一世 {保证金:var(-marginI，auto);边框:纯色1px灰色；背景:#4472c4;白颜色;text-indent:0.5em;}时间跨度:nth-​​child(5n-1)i {背景:#c65911;}时间跨度:nth-​​child(5n)我{背景:#548235;白颜色}时间跨度:nth-​​child(5n +1)i {背景:#ffd966;颜色:黑色;}时间跨度:nth-​​child(5n + 2)i {背景:#111；}  

 < div class ="aligment">< span> 1.wihu kw jw kwjew我们wekjwe w.< span> 2.</span>< span> 3.我们/我们/我们/我们/我们/我们/我们/我们.</span>< span> 4.我们，我们母羊.</span>< span> 5.</span>< span> 6.Wewewewescawewe或.< span> 7.我们，我们</span>< span> 8.我们我们</span>< span> 9.我们我们</span></div>  

和flex https://codepen.io/gc-nomade/pen/VwKYmZp (这看起来像一张Excel工作表...)

  const句子= document.querySelectorAll(.aligment> span");让框= document.querySelector(.aligment");让varCellWidth ="0";对于(i = 0; i<句子长度; i ++){常量单词=句子[i] .textContent.修剪().分裂(" ").map((s，i)=> {返回`< i> $ {s}</i>`;}).加入("");让CellWidth = document.querySelectorAll(.aligment> span> i");对于(ii = 0; ii< CellWidth.length; ii ++){让newWidth = CellWidth [ii] .offsetWidth;让oldWidth = window.getComputedStyle(document.body，null).getPropertyValue(-CellWidth");如果(oldWidth< newWidth){document.body.style.setProperty('-CellWidth'，newWidth);}}句子[i] .innerHTML =单词；如果(i ==句子长度-1){box.style.setProperty('-marginI'，"0");//不再需要获取宽度，此时它们可以散布整个单元格box.style.setProperty('-flexD'，"row");}}  

  .aligment {-MarginI:自动；显示:flex;边框:1px实线#000；flex-wrap:包装;flex-direction:var(-flexD，column);边框:实心；保证金:calc(var(-CellWidth)* 1px/2)calc(var(-CellWidth)* 1px);}.aligment> span {显示内容边框:实心；}一世 {保证金:var(-marginI，auto);边框:纯色1px灰色；背景:#4472c4;白颜色;文字缩进:0.5em；flex:1 0 calc(var(-CellWidth)* 1px);}span:nth-​​child(5n-1)i {背景:#c65911;}时间跨度:nth-​​child(5n)我{背景:#548235;白颜色;}时间跨度:nth-​​child(5n +1)i {背景:#ffd966;颜色:黑色;}时间跨度:nth-​​child(5n + 2)i {背景:#111；}  

 < div class ="aligment">< span> 1.wihu kw jw kwjew我们wekjwe w.< span> 2.</span>< span> 3.我们/我们/我们/我们/我们/我们/我们/我们.</span>< span> 4.我们，我们母羊.</span>< span> 5.</span>< span> 6.Wewewewescawewe或.< span> 7.我们，我们</span>< span> 8.我们我们</span>< span> 9.我们我们</span></div>  

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?

解决方案

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>

这篇关于显示:inline-flex;AND flex-wrap:wrap;没有填充上一行文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！