Принудительно переносить диапазон со значком на предыдущий диапазон

Работа с иконками Angular и Bootstrap. Мои метки — это промежутки, которые динамически заполняются файлом ng-bind-html. Для проверки я добавляю дополнительный диапазон со значком. Когда ширина двух промежутков превышает окно браузера, значок переносится на следующую строку. Я хочу, чтобы значок оборачивался только содержимым из первого диапазона. Вот скрипка.

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

Fiddle Example


html css angularjs twitter-bootstrap glyphicons
person Brett    schedule 06.08.2015    source источник
comment
Я думаю, вам нужно добавить немного больше деталей, возможно, с изображением, показывающим ожидаемый результат; в нынешнем виде это выглядит как стандартный способ, которым бутстрап упаковывает элементы; он разбивает каждое слово через определенные промежутки времени, а не только два интервала.   -  person Claies    schedule 07.08.2015
comment
Я не могу иметь значок на линии сам по себе. Если содержимое должно переноситься, мне нужно хотя бы одно слово из первого интервала для переноса значка.   -  person Brett    schedule 07.08.2015
comment
это не сломалось бы таким образом, даже если бы все содержимое было в одном и том же диапазоне, поэтому, опять же, я действительно не думаю, что это имеет какое-либо отношение к тому, как генерируется содержимое; вам нужно будет написать собственный css для управления оберткой.   -  person Claies    schedule 07.08.2015
comment
Конечно это css. Это то, о чем я прошу.   -  person Brett    schedule 07.08.2015
comment
Вы не так сформулировали вопрос; вы указали тег angularjs и конкретно упомянули ng-bind-html, что натолкнет многих на мысль, что вы пытаетесь предположить, что angular виноват в проблемах с макетом.   -  person Claies    schedule 07.08.2015
comment
Много? См. теги ключевых слов.   -  person Brett    schedule 07.08.2015
comment
я хочу сказать, что угловые теги и упоминание ng-bind-html не имеют никакой ценности для вопроса о вашем макете, и задав вопрос CSS без отображения какого-либо используемого CSS, скорее всего, вопрос будет проигнорирован. Я хотел бы, чтобы на ваш вопрос был положительный ответ, я просто пытаюсь помочь вам правильно сформулировать вопрос, чтобы это могло произойти.   -  person Claies    schedule 07.08.2015
comment
Решение, которое я нашел ранее, использовало текст в первом интервале, чтобы принудительно прикрепить значок к последнему слову, что не будет работать с динамической привязкой. Вы не можете предложить здесь ничего информативного.   -  person Brett    schedule 07.08.2015
comment
еще раз, действительно не нужно защищаться, я очень пытаюсь вам помочь. Теперь вы предполагаете, что вы пробовали что-то, что не работало с динамической привязкой, что определенно делает это угловой проблемой. Однако вы не упомянули об этом в вопросе или не показали решение, которое не работает, поэтому его можно протестировать и адаптировать.   -  person Claies    schedule 07.08.2015
comment
Можете ли вы обновить вопрос, включив в него решение, которое работает в некоторых ситуациях, но не в этой?   -  person Claies    schedule 07.08.2015

Ответы (1)


arrow_upward
0
arrow_downward

После рассмотрения я пропустил диапазоны и вместо привязки html использовал trustAsHtml() для отображения метки. Браузеры не будут перемещать значок вниз без предшествующего текста, если он не начинается с пробела.

Это нужно добавить в контроллер

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

а это хтмл

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