html - 强制带有图标的跨度与前面的跨度换行

Question

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

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

Fiddle Example

Answer 1

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

这必须添加到 Controller

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

这是html

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