使用弹性容器和人工换行修复行高或间隙问题

Question

我正在使用弹性容器和人工换行符来在需要时打断单词。我从来没有意识到它会导致线路之间产生额外的间隙。

正如您在示例中看到的，单词 HOW 后面的换行符之后的行间距比其他行之间的距离要高。想知道有没有办法解决这个问题？

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

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

Answer 1

您可以删除网格间隙并在项目上放置 0.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>