如何修复引导对齐文本列中的空格？答案

【问题标题】：How to fix spaces in bootstrap justified text columns?如何修复引导对齐文本列中的空格？
【发布时间】：2020-01-14 14:41:09
【问题描述】：

我正在创建一个需要有两列的 div，每一列都有对齐的对齐方式。问题是：当我使用两个 div 引导程序 col-lg6- 时看起来不错，但是当涉及到 col-md-6、col-sm-6 时，它会导致单词之间有很多空格，以便在处理不同大小时保持合理的对齐单词。

https://imgur.com/a/Fm4gSMB [图片示例链接]

1) 我已经尝试过使用纯 CSS：

#third-div{
background-color: #904e45;
text-align: justify;
column-count:2;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}

2) 尝试使用word-break: break-all; 但是ofc这会破坏没有语法逻辑的单词。

3) 现在我尝试在引导行中使用两个引导列，例如：

<div id="third-div" class="page-div">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6">
          <h1>Lots of text</h1>
          <h2 class="fio">But divided: two columns</h2>
          <p> a lot of text here  </p>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6">
          <p> a lot of text here </p>
        </div>

      </div>


    </div>

.page-div{
  padding: 15%;
  padding-left: 15%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#third-div{
  background-color: #904e45;
  text-align: justify;
}

【问题讨论】：

标签： html css bootstrap-4 frontend multiple-columns

【解决方案1】：

这就是 text-align: justify 的工作方式。它在单词之间附加相等的空间以保持文本合理，如果您修复它，它将不再是合理的。

我认为解决方案是在小屏幕上保留一列

<div id="third-div" class="page-div">
    <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12">
          <h1>Lots of text</h1>
          <h2 class="fio">But divided: two columns</h2>
          <p> a lot of text here  </p>
        </div>

        <div class="col-lg-6 col-md-12 col-sm-12">
          <p> a lot of text here </p>
        </div>
    </div>
</div>

这样它们应该像一个单独的列一样相互排列，并且有足够的空间来优化文本的对齐方式。

【讨论】：

嗯，谢谢！我正在寻找一种方法来保留两列并让文本对齐但没有间距，即使我不得不删除 text-align 并使用其他东西，但我想我会照你说的做然后在一个列中。谢谢！！ :)

【解决方案2】：

在某些浏览器 (FireFox) 中，您可以设置对齐间距以使用 letter 间距（类似于在 In-Design 等软件中调整字距）而不是默认的 word em> 间距。我认为它对于窄列中的某些文本看起来更好。见CSS-tricks' Text-Justify

【讨论】：