Выровненные по центру абзацы с симметричной шириной

Question

У меня есть абзац с текстом в нем. <p> имеет text-align:center;. Представьте, что текст больше одной строки. Linebreak всегда помещается, оставляя все возможные слова в первой строке, а всего лишь несколько во второй строке.

Скриншот Пример:

А вот скриншот того, как я хочу, чтобы мой HTML/CSS, чтобы расположить структурные линии:

Поскольку текст является динамическим, и страница должна быть отзывчивой, я не хочу делать это путем hardcoding <br> s или обертывания текста в <span style="display:inline-block;"> s для определения предпочтительных строк. Я не хотел бы менять 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/