引导程序：面板标题不中断

Question

这是我的代码：

<div class="panel panel-default" style="width: 400px;">
  <div class="panel-heading" role="button">
    <h3 class="panel-title">asdfasdfsadfa asdfasdfasdfasdfdsd <i aria-hidden="true" class="far fa-lg fa-pull-right fa-fw fa-square"></i></h3>
  </div>
</div>

这是我的example。

只要面板足够大，文本和FontAwesome图标就会内联。但是，一旦宽度减小，它不会打断单词，并且图标会下降到下一行。

我该如何解决？