html - 如何根据该文本的子集居中对齐文本内容？

Question

我有一个内联 flex div，我想使用文字换行和 div 溢出来创建效果。

基本上，当调整窗口大小时，句子中的一些词会消失并改变句子的意思。然后你会得到，取决于宽度:

• 我们做有趣的火箭设计 科学
• 我们做有趣的火箭 科学
• 我们做的很有趣 科学
• 我们做 科学

这是一个工作片段来说明我的意思:

.text-container {
  font-size: 4.0rem;
  line-height: 1.2;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: space-around;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
  padding: 10px;
  background-color: red;
}
.div1 {
  max-height: 100px;
  text-align: right;
  margin-right: 15px;
  background-color: blue;
}
.div2 {
  text-align: left;
  background-color: green;
}

<div class="text-container">
  <h3 class="div1"> We do fun rocket design</h3> 
  <h3 class="div2"> science</h3>
</div>

您需要调整窗口宽度，文字将从蓝色区域消失。

这是我的问题:

有没有办法用 css 根据显示的文本使行居中？我假设没有，但我想与那里的向导核实一下。

Answer 1

我不使用 flex，而是使用 span 和媒体查询:

.heading {
  text-align: center;
}
@media (max-width: 20em) {
  .hide1 {
    display: none;
  }
}
@media (max-width: 15em) {
  .hide2 {
    display: none;
  }
}
@media (max-width: 10em) {
  .hide3 {
    display: none;
  }
}

<div class="text-container">
  <h3 class="heading"> 
    We do 
    <span class="hide3">fun </span>
    <span class="hide2">rocket </span>
    <span class="hide1">design </span>
    science 
  </h3>
</div>

Example fiddle