Красная звездочка не должна исчезать в случае многоточия

Question

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

<label>{{label}} <span *ngIf="required" class="required-star-new"> * </span></label>

// CSS

.required-star-new {
  color: red;
  font-weight: bold;
  font-size: 18px;
  position: relative;
  top: 2px;
}

Мне нужно решение, в котором он должен вести себя, как показано на изображении ниже.

Answer 1

Можно считать position:sticky для этого

.required-star-new {
  color: red;
  font-weight: bold;
  font-size: 18px;
  position: sticky;
  display: inline-block;
  right:2px;
  top: 2px;
  margin-left:3px;
}
label {
  display:block;
  max-width:200px;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  border:1px solid;
}

<label>some text here<span class="required-star-new"> * </span></label>
<label>very long long long long long long text here<span class="required-star-new"> * </span></label>

Или используйте flexbox, но вам понадобится дополнительная оболочка:

.required-star-new {
  color: red;
  font-weight: bold;
  font-size: 18px;
  position: sticky;
  flex-shrink:0;
  margin-left:3px;
}
label > :first-child {
  min-width:0;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
}
label {
  display:flex;
  max-width:200px;
  border:1px solid;
}

<label><span>some text here</span><span class="required-star-new"> * </span></label>
<label><span>very long long long long long long text here</span><span class="required-star-new"> * </span></label>