防止 Bootstrap 按钮中的 fontawesome 图标单独换行到下一行

Posted 2023-03-06

【中文标题】防止 Bootstrap 按钮中的 fontawesome 图标单独换行到下一行

【英文标题】：Prevent fontawesome icon in a Bootstrap button to wrap to next line alone

【发布时间】：2021-11-05 21:43:02

【问题描述】：

这是一个简单的 Bootstrap 4 按钮，带有一个很棒的图标。当按钮放置在比其自然宽度小一点的容器中时，图标被推到下一行。

body 
  padding: 20px;

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">


<a href="#" class="btn btn-light">One two three <i class="fa fa-arrow-right ml-1"></i></a>

<p class="mt-2">
  When in a smaller container / window size:
</p>

<div class="mt-2" style="width: 140px;">
  <a href="#" class="btn btn-light">One two three <i class="fa fa-arrow-right ml-1"></i></a>
</div>

有什么办法可以阻止图标单独转到下一行（如下所示）？即强制最后一个单词用图标换行到下一行。

我知道我可以用white-space: nowrap; 将最后一个单词和图标包裹在一个范围内，如下所示：

<span style="white-space: nowrap;">three <i class="fa fa-arrow-right ml-1"></i></span>

但这对我来说不是一个可行的解决方案。有没有一种纯 CSS 方法来实现这一点？在最后一个单词和图标之间放置  也不起作用。

【参考方案1】：

有没有纯 CSS 方法来实现这一点？

我真的很怀疑。

我能想到的最好的就是这样的 JS 拐杖

document.querySelectorAll("i.fa-arrow-right").forEach(function (self) 
  var parent = self.parentNode;
  var words = self.previousSibling.nodeValue.split(/(?<=\s)/);
  var nobr = document.createElement("NOBR");

  parent.removeChild(self.previousSibling);
  parent.insertBefore(nobr, self);
  nobr.appendChild(document.createTextNode(words.pop()));
  nobr.appendChild(self);
  parent.insertBefore(document.createTextNode(words.join('')), nobr);
);

body 
  padding: 20px;

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

<a href="#" class="btn btn-light">One two three <i class="fa fa-arrow-right ml-1"></i></a>

<p class="mt-2">
  When in a smaller container / window size:
</p>

<div class="mt-2" style="width: 140px;">
  <a href="#" class="btn btn-light">One two three <i class="fa fa-arrow-right ml-1"></i></a>
</div>

【讨论】：

好的，谢谢sn-p。虽然我希望有一个 CSS 解决方案但我也怀疑是否有一个解决方案......我会尝试一下！