如何根據文本的子集居中對齊文本內容？

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，我將使用跨度和媒體查詢：

 .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> 

小提琴的例子