Переполнение текста: многоточие и Flexbox

Question

Я хочу иметь коробку с текстом и иконкой внутри.Иконка должна прилипать к правой стороне поля, текст к левой.Если текст слишком длинный, чтобы поместиться в поле рядом со значком, я хочу, чтобы его укорачивало свойство text-overflow:ellipsis.Я не настаиваю на реализации его с Flex-Box, если есть лучший способ сделать это.

Это должно выглядеть так:

И вот чего я достиг:

div#Wrapper {
  border: 0.2em solid black;
  width: 6em;
  padding: 0.5em;
  display: flex;
}


span#Text {
  white-space: nowrap;
  text-overflow: ellipsis;
}


span#Icon {
  background-color: blue;
  border-radius: 50%;
  height: 1em;
  width: 1em;
  display: inline-block;
  margin-left: auto;
}

Short Text:
<div id="Wrapper">
  <span id="Text">
    This
  </span>
  <span id="Icon"> 
  </span>
</div>

<br><br><br>

Text:
<div id="Wrapper">
  <span id="Text">
    This is Text
  </span>
  <span id="Icon"> 
  </span>
</div>

<br><br><br>

Long Text:
<div id="Wrapper">
  <span id="Text">
    This is long long long Text
  </span>
  <span id="Icon"> 
 
  </span>
</div>

Answer 1

Я заменил идентификаторы на классы, поскольку идентификатор должен быть уникальным в документе.Кроме того, я добавил переполнение: скрытый для текста и flex: 0 0 auto для значка.

div#Wrapper {
  border: 0.2em solid black;
  width: 6em;
  padding: 0.5em;
  display: flex;
}

span.Text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; /* Added */
}

span.Icon {
  background-color: blue;
  border-radius: 50%;
  height: 1em;
  width: 1em;
  display: inline-block;
  margin-left: auto;
  flex: 0 0 auto; /* Added */
}

Short Text:
<div id="Wrapper">
  <span class="Text">
    This
  </span>
  <span class="Icon"> 
  </span>
</div>

<br><br><br> Text:
<div id="Wrapper">
  <span class="Text">
    This is Text
  </span>
  <span class="Icon"> 
  </span>
</div>

<br><br><br> Long Text:
<div id="Wrapper">
  <span class="Text">
    This is long long long Text
  </span>
  <span class="Icon"> 
 
  </span>
</div>

Answer 2

Вот, пожалуйста.

https://jsfiddle.net/hxz05g9j

Другой подход - сделать круг как :after css.

Answer 3

Вы можете добавить flex: 1 и overflow: hidden свойства элемента text.

div#Wrapper {
  border: 0.2em solid black;
  width: 6em;
  padding: 0.5em;
  display: flex;
}
span#Text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
span#Icon {
  background-color: blue;
  border-radius: 50%;
  height: 1em;
  width: 1em;
  margin-left: auto;
}

<div id="Wrapper">
  <span id="Text">
    This is long long long Text
  </span>
  <span id="Icon"></span>
</div>