我有相当具有挑战性的设计要做。 有人遇到过这种情况吗？
这是我需要的设计，文本是底部对齐的，但如果行上没有足够的空间，文本就会向上流动。
-------------------
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>尝试将其放在固定<div>
div.not_fixed {
border-top: 1px dashed;
border-bottom: 1px dashed;
display: flex;
}
div.fixed {
width: 100px;
height: 100px;
border-top: 1px dashed;
border-bottom: 1px dashed;
display: flex;
}
.fixed span {
align-self: flex-end;
}<div class="not_fixed">
this is a pretty long title
</div>
<BR>
<div class="fixed">
<span>this is a pretty long title</span>
</div>