Question

我有一个内联flex div我想使用wrap和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，我会使用跨度和媒体查询：

template <typename A, typename = std::enable_if<std::is_same<A, Array>::value, A>>
void Add(const Array& array);

+=

Example fiddle

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

1 个答案: