显示:内联-flex；和flex-包装: text；不填充前面的文本行
显示:内联-flex；和flex-包装: text；不填充前面的文本行
提问于 2020-11-28 10:28:49
我需要使用display: inline-flex;和flex-wrap: wrap;。我认为这两个挠曲盒的值是互相阻塞的。每句话都包裹在挠曲箱内的跨度里。如果句子足够短，它将显示在另一个句子旁边，就像我想要的那样，但后面的句子仍然不能填补剩余的空间。
我想要达到的目标：
当前代码：
.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是答案，但我还没有弄清楚如何让它发挥作用。我知道这个问题的出现是因为内联-flex真的把句子当作块，而不是行。
有使用css、javascript或html的想法吗？
也许这是如此明显，以前没有人有问题，但我有，我找不到一个有效的解决办法。例如，这些方法不起作用：How to specify line breaks in a multi-line flexbox layout?
回答 1
Stack Overflow用户
发布于 2020-11-28 13:56:50
不确定我是否完全理解，这里有一种可能的方法，通过网格和javascript，将每个单词包装在一个标记中，我们从中获得最大的作为引用的宽度，然后通过dispaly:contents将句子的容器从dom中移除:内容使单词成为网格的直接子元素。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65048582
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号