Угловой псевдоэлемент bind css без атрибута () - PullRequest
0 голосов
/ 14 июня 2019

Я использую плагин, который автоматически усекает длинный текст, когда помечает div ключевым словом ellipsis:

<div style="height: 65px; width: 100px; text-align: center;" ellipsis> {{modelName}}</div>

рассчитывается в браузере, чтобы стать :

<div style="height: 65px; width: 100px; text-align: center;" ellipsis>
   <div class="ngx-ellipsis-inner">
      modelName that is too long so it s trun....
   </div>
</div>

Мне нужен значок / изображение перед названием модели; вот так:

*I am centered* [icon]modelName *I am centered*

*I am centered* [icon]modelName that is too long so it s trun.... *I am centered*

Плагин с многоточием не может обрабатывать изображения, кроме текста, поэтому я должен обойти его и не могу поместить изображение / значок непосредственно в div.

Я попытался расположить изображение / значок (img [src] = "icon") с помощью float: left; рядом с ним, но не удалось, так как, если имя модели короткое, между ними есть некоторое неудобное пространство:

[icon] *unwanted space* shortModelName *wanted space*

Я подумал, может быть, с помощью CSS и что-то в этом роде:

.ngx-ellipsis-inner::before{
   content: url({{icon}});
}

но также не смог заставить его работать. Решение attr (), которое многие люди, похоже, используют, к сожалению, не работает в моем случае, так как я не могу напрямую получить доступ к ngx-ellipsis-inner div.

Было бы здорово, если бы у sb была идея !! Thx:)

...