Html 中间对齐的段落平衡宽度线

我有一段文字。

具有

文本对齐：居中。假设文本大于一行。换行符总是放在第一行留下所有可能的单词，第二行只留下几个

屏幕截图示例：


下面是我希望我的html/css如何定位特征线的屏幕截图：


由于文本是动态的，并且页面需要响应，因此我不想通过硬编码

s或将文本包装到
s中来定义首选换行符来实现这一点。我也不想更改
字体大小

有没有什么技巧可以在不使用JavaScript的情况下自动执行此操作？
您可以通过添加左右填充来完成此操作<代码>填充：0 50px但如果不使用javascript，这几乎是您唯一的选择。
试试这个

<div class="container">
    <p>
        Text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text text Text text Text text Text text Text text Text text
    </p>
</div>

.container {
    font-size: 18px;
    padding:0 20%;
    text-align: center;
}

@media screen and (max-width: 600px) {
    .container {
        padding: 0 20px;
    }
}



文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

.集装箱{
字号：18px；
填充：0.20%；
文本对齐：居中；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.集装箱{
填充：0 20px；
}
}

现场演示-
没有JS？很可能不是。CSS没有计算字符数或任意断行的机制。将内部内容包装在单独的响应元素中不是一个选项吗？我同意@disifor，这在css中是不可能的。