强制带图标的跨度与前面的跨度换行答案

【问题标题】：Force span with icon to wrap with preceding span强制带图标的跨度与前面的跨度换行
【发布时间】：2015-08-08 03:17:48
【问题描述】：

使用 Angular 和 Bootstrap 图标。我的标签是由 ng-bind-html 动态填充的跨度。为了验证，我附加了一个带有图标的跨度。当 2 个跨度的宽度超过浏览器窗口时，图标将换行到下一行。我希望图标只包含第一个跨度的内容。这是一个小提琴。

<label>
<span>Dynamically bound text loooooooooooooooooooooooooooooooooooooooooooong</span>
&nbsp;
<span>
    <i style="font-size: 10px" class="glyphicon glyphicon-asterisk"></i>    
</span>

Fiddle Example

【问题讨论】：

我认为您需要添加更多细节，也许可以通过图片显示您的预期结果；就目前而言，这看起来像是引导程序包装项目的标准方式；它以一定的间隔打破每个单词，而不仅仅是两个跨度。
我不能将图标单独放在一行上。如果内容必须换行，我需要第一个跨度中的至少一个单词来用图标换行。
即使内容都在同一个跨度中，它也不会破坏这种方式，所以我真的不认为这与内容的生成方式有任何关系；您必须编写自定义 css 来控制换行。
当然是css。这就是我所要求的。
你没有这样说问题；你列出了 angularjs 标签，并特别提到了ng-bind-html，这会让很多人认为你试图暗示 angular 是布局问题的罪魁祸首。

标签： html css angularjs twitter-bootstrap glyphicons

【解决方案1】：

经过考虑，我省略了跨度，而不是绑定 html，我使用 trustAsHtml() 来显示标签。浏览器不会在没有前面的文本的情况下将图标向下移动，只要它们没有以空格开头。

这必须添加到控制器中

$scope.trustAsHtml = function (string) {
    return $sce.trustAsHtml(string);
};

这是html

{{(trustAsHtml(Dynamic.text))}}&nbsp;
<i style="display: inline" 
    class="glyphicon glyphicon-asterisk glyphicon-required">
</i>

【讨论】：