Выровнять по правому краю текст, но в остальном оставить выравнивание

Я делаю мобильное веб-приложение для демонстрации церковных гимнов. Стих в гимне в идеале не должен быть разбит на две строки, если он превышает ширину экрана, но этого нельзя избежать с помощью разных размеров экрана для мобильных устройств.Выровнять по правому краю текст, но в остальном оставить выравнивание

Вместо этого я хотел бы иметь текст, который завернут в новую строку, выравнивается по правому краю.

Как с помощью CSS убедиться, что обернутый текст выровнен по правому краю и где текст в противном случае выравнивается по левому краю.

Скриншот того, как я хочу, чтобы результат выглядеть следующим образом:

Вот мой HTML:

<p> 
 
\t Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/> 
 
\t Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/> 
 
\t Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br/> 
 
\t Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum 
 
</p>

источник

2016-03-14 Andreas Joensen

Я не могу думать о какой-либо метод макета, текста или иным образом, что бы сделать это. –

Слишком плохой 'text-align' не применим для': first-line' (в противном случае он мог бы работать с этим, если бы текст был разбит на отдельные строки/элементы.) – CBroe

Я пошел с решением javascript: https://jsfiddle.net/691uzhn5/1/ –

Вы можете сделать каждый стих в теге и использовать text-align-last. Проблема заключается в плохой совместимости (без мобильного или сафари).

p { 
 
    -moz-text-align-last: right; 
 
    text-align-last: right; 
 
}

<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
<p> 
 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
<p> 
 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Вы можете увидеть значения и совместимость в MDN:

https://developer.mozilla.org/es/docs/Web/CSS/text-align-last

источник

2016-03-14 12:50:30

Не полностью решает мою проблему. Строки, которые короче ширины экрана, будут выровнены по правому краю. Может быть, я могу исправить это с помощью javascript. –

@AndreasJoensen Да, все ** последние ** линии будут выровнены с правой стороны, и если есть одна строка, которая, очевидно, ведет себя как последняя строка. Трудно точно выполнить то, что вам нужно. С javascript вам нужно вырезать струны, и это не пуленепробиваемый. Приходите сюда, если вам нужна дополнительная помощь. Удачи. –

Выровнять по правому краю текст, но в остальном оставить выравнивание

ответ

Смежные вопросы