修复柔性容器和人工换行符的线高或间隙问题

Fixing line-height or gap issues with flex container and artificial line break

提问人：CRAIG 提问时间：9/25/2023 最后编辑：CRAIG 更新时间：9/25/2023 访问量：66

问：

我使用一个 flex 容器和一个人工换行符来在需要时断开单词。我从未意识到它会导致线条之间有额外的间隙空间。

正如您在示例中看到的，单词 HOW 后面的换行符后的行间距高于行之间的其他距离。

父 div 在宽度和高度上都可以是任何大小，并且子项将始终垂直居中，并且可以向左或向右或居中对齐，所以除非我遗漏了什么，否则 Flex 似乎是理想的。

.outer-container {
height:200px;
width:200px;
}

.flex-container {
  display:flex;
  gap:.2em;
  font-size:20px;
  width:100%;
height:100%;
  flex-wrap:wrap;
  white-space:pre-line;
  align-content:center;
  justify-content:center;
  
}

.flex-item {
  background:red;
  padding:2px;
}

.linebreak {
  display:flex;
   
    flex-direction: column; 
     flex-basis: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="outer-container">
<div class="flex-container">
  <div class="flex-item">Hi</div>
  <div class="flex-item">There</div>
  <div class="flex-item">How</div>
  <div class="linebreak"></div>
  <div class="flex-item">Are</div>
   <div class="flex-item">You</div>
     <div class="flex-item">Everyone</div>
       <div class="flex-item">Here</div>
         <div class="flex-item">is Fine</div>
</div>
</div>

CSS Flexbox 换行符

评论

0赞 msrumon 9/25/2023
不仅更高，而且相距 2 倍（确切地说）。当然，这是一种预期的行为——每个样式表的所有 flex 子项之间存在差距。你到底想在这里“解决”什么？.4em.2em
0赞 Gerard 9/25/2023
删除类，一切都将按预期进行。linebreak
0赞 CRAIG 9/25/2023
@Gerard 没错，但是如果我的弹性框恰好比当前大小宽（虽然我在这个例子中以固定大小设置了它，但并不总是如此），那么我就不会有预期的中断。
0赞 CRAIG 9/25/2023
@msrumon我希望空间与其他单词之间的空间相同。很高兴在我的问题中澄清，如果你能让我知道哪个部分不清楚。感谢。
0赞 CRAIG 9/25/2023
为了清楚起见，我添加了更多上下文。

答：

1赞 A Haworth 9/25/2023 #1

您可以删除网格间隙并在项目上放置 .1em 边距。

.flex-container {
  display:flex;
  font-size:20px;
  width:200px;
  flex-wrap:wrap;
  white-space:pre-line;
}

.flex-item {
  background:red;
  padding:2px;
  margin: .1em;
}

.linebreak {
  display:flex;
   
    flex-direction: column; 
     flex-basis: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="flex-container">
  <div class="flex-item">Hi</div>
  <div class="flex-item">There</div>
  <div class="flex-item">How</div>
  <div class="linebreak"></div>
  <div class="flex-item">Are</div>
   <div class="flex-item">You</div>
     <div class="flex-item">Everyone</div>
       <div class="flex-item">Here</div>
         <div class="flex-item">is Fine</div>
</div>

评论

0赞 CRAIG 9/25/2023
这看起来最有意义。让我测试一下。
0赞 CRAIG 9/25/2023
是的，这似乎是解决方案。谢谢。

上一个：HTML5 canvas ctx.fillText 不会做换行符吗？

下一个：如何使用 Mac 在 CSV 文件中查找换行符样式（CRLF、CR 或 LF）