在 flex 布局中将文本居中对齐答案

【问题标题】：Align the text as center in flex layout在 flex 布局中将文本居中对齐
【发布时间】：2019-10-19 15:12:18
【问题描述】：

如果我们要将文本对齐到div的中心或末尾，我们需要显示省略号，如果文本长度超出了div的宽度。

下面的示例工作正常。

我的期望是：如果我们将 item 类添加到父 div，它将像在 span 中应用的那样工作。

工作示例： 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;
});

【问题讨论】：

添加宽度：150px;到 span.item 视图中心和 flex-end
@HirenVaghasiya，如果我们为 span 添加宽度 150，在 flex-end 模式下它将隐藏一些文本
但是你已经在使用 text-overflow: ellipsis;所以默认情况下它不会显示所有文本
@Hiren，是的，它没有显示所有文本，而是显示省略号。如果我们根据您的问题添加，宽度为 150 的跨度，省略号也不会显示。
我添加了应用宽度的答案

标签： html css flexbox

【解决方案1】：

这里可以申请 max-width:90%;到 span.item 用于查看 center 和 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>

【讨论】：

嗨@hiren，但是如果我将容器宽度从 200 像素更改为 400 像素。它不会按预期工作。
即使我们想改变容器的宽度，它也需要以相同的行为工作。内部文本将根据容器宽度起作用（带省略号或不带省略号）
嗨@Hiren，但是如果我们选择居中模式，将容器宽度更改为400px后，它将不在div的中心。
@Pandi 是的，我已经检查过了，所以它不是使用 % 超过 200px 宽度的中心
好的@hiren，但我想要一个通用的解决方案。

【解决方案2】：

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

.child {
 margin: auto;
  }

【讨论】：

它将整个 div 居中。但我的要求是将内部跨度元素文本居中。如果文本长度大于 div 的宽度，则文本需要以省略号格式显示。