我有相当具有挑战性的设计要完成。 有没有人遇到过这种情况？
这是我需要的设计，文本底部对齐，但如果行上没有足够的空间，文本会向上流动。
-------------------
this is
a pretty long title
-------------------
这里不是我需要的，可以通过vertical-align: bottom 或position: absolute; 轻松实现； bottom: 0，但文本流并不是我想要的。
-------------------
this is a pretty long
title
-------------------
请注意第二行的字数比第一行多。换行过程是如果文本对于一行来说太长，将第一个单词换行到上面一行
如有任何帮助，我们将不胜感激。
最佳答案
这是一个可怕的困惑。但它确实做你想做的。我不认为真的有任何好的方法来获得您正在寻找的行为。祝你好运!
window.onload = function () {
var peaches = document.getElementsByClassName("peaches");
for (var i = 0; i < peaches.length; i++) {
addSpans(peaches[i]);
var box = peaches[i].getBoundingClientRect();
alignSpans(peaches[i].childNodes, box);
}
}
function addSpans(element) {
var text = element.innerHTML.split(" ");
var result = "";
for (var i = text.length - 1; i >= 0; i--) {
result += "<span>" + text[i] + " </span>";
}
element.innerHTML = result;
}
function alignSpans(nodes, box) {
var previousY = null, previousRight = null;
for (var i = nodes.length - 1; i >= 0; i--) {
var style = nodes[i].style;
style.position = "relative";
var rect = nodes[i].getBoundingClientRect();
if (previousY != null && rect.y == previousY) {
style.right = previousRight;
} else {
style.right = rect.x - box.x;
previousY = rect.y;
previousRight = style.right;
}
}
}p.peaches {
width: 125px;
display: flex;
flex-wrap: wrap-reverse;
direction: rtl;
justify-content: flex-end;
}<body>
<p class="peaches">
this is a pretty long title
</p>
</body>关于HTML-CSS : How to text-align starting from the last word?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47784880/