个人中心
gpt4 book ai didi

html - 显示 : inline-flex; AND flex-wrap:wrap; doesn’t fill previous line of text

转载 作者：行者123 更新时间：2023-12-04 08:30:24 25 4
gpt4 key购买 nike

我需要使用 display: inline-flex;和 flex-wrap: wrap; .我认为 flexbox 的这两个值是相互阻塞的。每个句子都包裹在 flexbox 中的 span 中。如果句子足够短，它会像我想要的那样显示在另一个句子旁边，但仍然不会填充剩余空间。
我想达到的目标:
Contains what I want and what I got
我当前的代码:

.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>

在我连接 CSS 之前，文本按照我想要的方式显示，在完整的句子中打断并填充空格。在我连接 .css 文件后，句子在宽度为 100% 之前不会中断。 white-space: normal !important;效果不佳，或者基本上没有我发现的任何东西。也许 min-width是答案，但我还没有想出如何使它工作。我知道出现这个问题是因为 inline-flex 将句子真正视为块而不是行。
任何使用 css、javascript 或 html 的想法？
也许很明显，以前没有人遇到过它的问题，但我有，而且我找不到可行的解决方案。例如，这些不起作用: How to specify line breaks in a multi-line flexbox layout?

最佳答案

不确定我是否完全理解，这是一种通过 grid 和 javascript 的可能方法，其中每个单词都被包装成一个标签，我们从中获得宽度以保持最大作为引用，然后通过显示从 dom 中虚拟地删除句子的容器:contents 保持单词是网格的直接子元素。
https://codepen.io/gc-nomade/pen/VwKYKdj (脚本需要优化，但这是基本思路。)

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>

和 flex https://codepen.io/gc-nomade/pen/VwKYmZp (这个看起来像一个excel表......) 

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>

关于html - 显示 : inline-flex; AND flex-wrap:wrap; doesn’t fill previous line of text，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65048582/

25 4 0
文章推荐： c++ - 交换 vector 以释放它
文章推荐： python - 如何使用 Pandas 获取两个日期之间的天数
文章推荐： list - 如何使用 MIT 应用程序发明者从字典中的键返回给定值？
文章推荐： python - 每个 PowerShell 调用 Python 脚本并传递 PSObject 并返回解析后的数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com