仅限CSS：当在句子中的某个位置断线时，

您可以看到一个以特定分辨率居中的句子：

在较小的屏幕中，您可以看到第一行中断：

我期望的结果是：如果有第一线中断，那么它应该发生在某个位置，如：

我能用CSS唯一的解决方案实现这一点吗

代码笔示例：

HTML和CSS部分非常简单：

卷起手上的八块红色
海军少尉帕利了望台舞蹈
亨彭吉格猎枪总公司
快活的小船。

.cTextContainer{
填充：30px；
文本对齐：居中；
字体大小：24px；
保证金：自动；
边框：1px纯红；
}

以下情况可能不会发生：

这始终是一个理想的结果，例如：

请考虑：在实际示例中（一个复杂的场景，在这里解释它太费时），我使用

vw

和

vh

来缩放字体大小。我想保证在每种可能的分辨率（从手机到大屏幕）上都有相似的外观

编辑：

---

我可以想象这样的情况：将文本的50%（2行）或33%（3行等）移到单词后面或前面的下一行。我目前的解决方法是在许多媒体查询中改变方框宽度与屏幕宽度的关系。

您可以使用媒体查询来解决此类问题。 请查找下面的代码，我认为它将帮助您解决问题

<div class="cTextContainer">
       Furl hands Pieces of Eight red 
  ensign parley lookout dance <br>the 
  hempen jig chase guns main 
  sheet jolly boat.
</div>

.cTextContainer {
  padding: 30px;
  text-align: center;
  font-size: 24px;
  margin: auto;
  border: 1px solid red;
}     
@media screen and (min-width: 700px) 
{
  .cTextContainer br 
  {
    display: none;
  }
}

卷起手上的八块红色
海军少尉帕利了望舞
亨彭吉格猎枪总公司
快活的小船。
.cTextContainer{
填充：30px；
文本对齐：居中；
字体大小：24px；
保证金：自动；
边框：1px纯红；
}     
@媒体屏幕和屏幕（最小宽度：700px）
{
.cTextContainer br
{
显示：无；
}
}

Thank you@Jestin T Wilson，我知道这是解决这个问题的一种可能，但想象一下，你必须对每种可能的屏幕分辨率进行如此多的手动干预（在我的情况下，每个文本部分可能需要60次媒体查询），这最终是不值得的。必须有一个巧妙的解决办法。我想象这样的情况：将50%的文本移到一个单词之后或之前的下一行，…CSS不可能。您必须更改HTML结构。把你不想在一段时间内打断的每一行都包起来，然后把它们设为内联块亲爱的@Paulie\u谢谢你，我会试试的，。。