Выровняйте текст по центру в гибком макете

Question

Если мы хотим выровнять текст как центр или конец div, нам нужно показать многоточие, если длина текста была переполнена, ширина div.

Здесь ниже образец работал нормально.

Я ожидаю, что: если мы добавим класс элемента в родительский div, он будет работать так же, как тот, который был применен в промежутке.

Рабочий пример: https://codepen.io/Muthupandi07/pen/oRVwqV

Заранее спасибо.

HTML:

<div class="controls">
<select id="justifyMe">
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
</select>    
</div>

<div class="container" id="container">
  <span class="item">How to center an item using flexbox</span>      
</div>

CSS:

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  width: 200px;
}

.item {
  text-overflow: ellipsis;
  white-space: pre;
  overflow: hidden;
}

.controls {
  background-color: rgba(0,0,0,.1);
  padding: 10px;
  border-radius: .5em;
  border: 1px solid rgba(0,0,0,.2);
  margin: 0 0 2em 0
}

.controls select {
  font-size: .9em;
}

JS:

var justify = document.getElementById("justifyMe");
justifyMe.addEventListener("change", function (evt) {
  document.getElementById("container").style.justifyContent = evt.target.value;
});

Answer 1

Здесь вы можете применить максимальную ширину: 90%; на span.item для просмотра центра и flex-end

var justify = document.getElementById("justifyMe");
justifyMe.addEventListener("change", function (evt) {
  document.getElementById("container").style.justifyContent = evt.target.value;
});

body {
  padding: 20px;
  font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}

* {box-sizing: border-box;}

p {
  margin: 0 0 1em 0;
}

.container {  
  border: 5px solid rgb(111,41,97);
  border-radius: .5em;
  padding: 10px;
  display: flex;
  width: 200px;
}

.item {
  text-overflow: ellipsis;
  white-space: pre;
  overflow: hidden;
  max-width:90%;
}

.controls {
  background-color: rgba(0,0,0,.1);
  padding: 10px;
  border-radius: .5em;
  border: 1px solid rgba(0,0,0,.2);
  margin: 0 0 2em 0
}

.controls select {
  font-size: .9em;
}

<div class="controls">
<select id="justifyMe">
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
</select>

</div>

<div class="container" id="container">
  <span class="item">How to center an item using flexbox</span>
  
</div>

Answer 2

 <div class="parent">
 <span class="child"> center me </span>
 <div>
.parent {
 display: flex;
 }

.child {
 margin: auto;
  }