使用 Angular 和 Bootstrap 图标。我的标签是由 ng-bind-html 动态填充的跨度。为了进行验证,我附加了一个带有图标的附加跨度。当 2 个跨度的宽度超过浏览器窗口时,图标将换行到下一行。我希望图标只包含第一个跨度中的内容。这是一个 fiddle 。
<label>
<span>Dynamically bound text loooooooooooooooooooooooooooooooooooooooooooong</span>
<span>
<i style="font-size: 10px" class="glyphicon glyphicon-asterisk"></i>
</span>
最佳答案
经过考虑,我省略了跨度,而不是绑定(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>
关于html - 强制带有图标的跨度与前面的跨度换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31866488/