在Flex布局中将文本对齐为中心

Question

If we want to align the text as center or end of the div, we need to show the ellipsis, If text length was overflowed the div width.

Here below sample was work fine.

My expectation is: If we add the item class to the parent div it will be worked as the same like which was applied in the span.

Working Example: https://codepen.io/Muthupandi07/pen/oRVwqV

Thanks in advance.

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

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

Answer 2

Here you can apply max-width:90%; to span.item for viewing center and 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>