Question

使用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

Answer 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>

强制跨度与图标包装前面的跨度

1 个答案: