如何用字符进行线条夹紧？

Question

我正在尝试进行线条夹紧，这就是它的example。

所以碰巧在我的应用程序而不是空格“”中，正在生成&nbsp。

事情是当我尝试这样做时，第一行显示丑陋，因为该行短语被分为两个单词。在我的主要项目中，我无法对&nbsp消失做任何事情。

那么有什么CSS解决方案让它看起来不错吗？

这是codepen。

HTML

<div class="container-fluid">
  <div class="col-md-4">
    <div class="jumbotron">
      <div class="row description">
        <p>
Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words&nbsp;Some words
        </p>
      </div>
    </div>
  </div>     
</div>

CSS

$font-size: 14px;
$line-height: 1.3;
$lines-to-show: 8;

.description {
    display: block;
    display: -webkit-box;
    height: $font-size*$line-height*$lines-to-show;
    margin: 0 auto;
    font-size: $font-size;
    line-height: $line-height;
    -webkit-line-clamp: $lines-to-show;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.jumbotron p {
  font-size: 14px;
  margin-bottom: 0;
}

.container-fluid {
  margin: 30px 60px;

  .jumbotron {
    background-color: #00FFFF;
    padding: 0;
  }
}

Answer 1

我建议你使用的一件事是：

text-align: justify;

这会将文本拉伸为容器的整个宽度。

Answer 2

解决方案是使用text-align: justify;，但空格按钮生成 的问题可能与我偶尔出现的问题相同。

如果在某些情况下Google Chrome浏览器似乎使用 而不是常规空格。使用其他浏览器可能会在将来失效。

编辑：非CSS解决方案正是您要解决的问题，只需反向使用this original topic。