css 文本对齐 30%

Question

我正在寻找一个选项来将文本按宽度的特定百分比对齐。这将是 div，其中文本未居中或左侧对齐。它需要介于两者之间。
我不确定是否有一种简单的方法可以做到这一点，但她是一个更好地解释它的例子。

div 的宽度不变，但文本会发生变化。
短文本应在线下方对齐，但当文本变大时，它会像通常居中时一样展开，直到右侧只有 space。然后它的行为就像正常的左对齐文本。
如果这样的事情是可能的，那就太好了： text-align:30%;
example with long text

更新： example, very short text

Answer 1

为什么不使用左填充？

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

这是一个有效的 jsfiddle 示例： https://jsfiddle.net/umw5mrde/1/

更新：问题已更新，这里是修改后的答案以匹配它：我发现没有办法用纯 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 时，改变它。

css 文本对齐 30%

css text-align at 30%

html

css

text-align