Font Awesome 5 "fa-layers-text" class 有没有牢不可破的 space？

Question

我真的被这个看似简单的任务困住了：我想在 FA 图标上放置一行包含空格的文本。仅当文本不包含任何空格时，跟随 their instructions 才有效。空格将文本换行到下一行。我怎样才能防止这种情况发生，以便只有一行文本（无论多宽）放在一个图标上？

这会在实心心形图标上创建三行文本 - 我只想要一行。

.fa-layers {
  margin:50px;
}

<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<span class="fa-layers fa-fw">
 <i class="fas fa-heart" data-fa-transform="grow-96" style="color:red"></i>
 <span class="fa-layers-text" style="font-weight:900">any text here</span>
</span>

感谢任何提示。

Answer 1

简单考虑white-space:nowrap;

.fa-layers {
  margin:50px;
}
.fa-layers-text {
  white-space:nowrap;
}

<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
<span class="fa-layers fa-fw">
 <i class="fas fa-heart" data-fa-transform="grow-96" style="color:red"></i>
 <span class="fa-layers-text" style="font-weight:900">any text here</span>
</span>

Font Awesome 5 "fa-layers-text" class 有没有牢不可破的 space？

Font Awesome 5 Is there a non-breakable space for "fa-layers-text" class?

whitespace

font-awesome

font-awesome-5