css text-align at 30%

Question

Я ищу возможность выровнять текст с определенным процентом от ширины. Это будет div, где текст не выровнен по центру или влево. Это должно быть между ними.
Я не уверен, если есть простой способ сделать это, но она является примером, чтобы объяснить это лучше.

Ширина div постоянна, но текст изменяется.
Короткий текст должен быть выровнен под линией, но когда текст становится больше, он просто расширяется, как это было бы нормально, когда его центрировано до тех пор, пока не будет только пространство с правой стороны. Затем он ведет себя как обычный выравниваемый слева текст.
Было бы хорошо, если бы что-то подобное было возможно: text-align:30%;
example with long text

Update: example, very short text

Answer 1

Почему бы не использовать отступы осталось?

.text-to-align { 
    padding-left: 30%; 
} 

Вот рабочий jsfiddle пример: https://jsfiddle.net/umw5mrde/1/

---

UPDATE: Вопрос был обновлен и здесь модифицирует ответ, чтобы соответствовать этому: я не нашел способа сделать это с чистым CSS, но есть решение, использующее javascript с jquery. Он вычитает 30% ширины метки с 30% от ширины родителя. Это значение присваивается левому заполнению метки.

$(".text-to-align").each(function(index) { 
    var padding = ($(this).parent().width() - ($(this).width())) * 0.3 + "px"; 
    // alert(padding); 
    $(this).css("padding-left", padding); 
}); 

Работа jsfiddle пример: https://jsfiddle.net/umw5mrde/2/

Но вы определенно должны избегать. Когда ваш дизайн настолько сложный, что он требует javascript, измените его.