CSS выравнивает текст по правому краю, но выравнивает по левому краю при переносе строки ⇐ CSS

[Anonymous]

Я пытаюсь выровнять текст по правому краю, но если текст слишком длинный, необходимо сделать разрыв строки и выровнять его по левому краю текста. Мне сложно объяснить, поэтому у меня есть изображение того, что я пытаюсь сделать:




Как видите, текст выровнен по правому краю этого небольшого div. Но когда происходит разрыв строки, она также логически выравнивается по правому краю.

Я пытался обернуть ее в элемент div, где родительский элемент выровнен по правому краю, а ребенок с текстом слева. Дело в том, что я получаю такой результат:




что по-прежнему неверно, поскольку текст не выравнивается по правому краю, когда он разрывается. Есть ли способ сделать это?
И я не хочу указывать максимальную ширину или что-то в этом роде для текста, поскольку, если места достаточно, он должен занимать всю ширину, доступную для строки.

Код: Выделить всё

body {
background: #cccccc;
}

.parentDiv {
width: 100px;
height: 100px;
background-color: white;
display: flex;
flex-direction: column;
}

.alignRight {
margin-left: auto;
}

.alignLeft {
text-align: left;
padding-bottom: 5px;
}

Код: Выделить всё

bla




testing cool text

Подробнее здесь: https://stackoverflow.com/questions/453 ... line-break