中心对齐的段落平衡宽度线

Question

我有一段带有一些文字的段落。 <p>有text-align:center;。想象一下，文本大于一行。总是放置换行符，将所有可能的单词留在第一行，而在第二行放置几行。

屏幕截图示例：

以下是我希望html / css如何定位分隔线的截图：

由于文本是动态的，并且页面要响应，我不想通过硬编码<br>或将文本包装到<span style="display:inline-block;">来定义首选换行符来实现。我不想改变font-size

有没有任何技巧可以在没有JavaScript的情况下自动执行此操作？

Answer 1

您可以通过添加左右填充来完成此操作。 padding: 0 50px;但不使用javascript，这几乎是您唯一的选择。

Answer 2

试试这个

<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;
    }
}

现场演示 - https://jsfiddle.net/grinmax_/hLzko135/