Question

我的设计非常具有挑战性。有没有人遇到过这个？

这是我需要的设计，文字底部对齐，但如果线上没有足够的空间，文字会向上流动。

-------------------


this is 
a pretty long title
-------------------

这里不是我需要的，可以通过vertical-align: bottom或position: absolute; bottom: 0轻松实现，但文字流程并不是我想要的。

-------------------


this is a pretty long
title
-------------------

请注意，第二行的字数多于第一行。如果文本对于一行太长，则包装过程是，将第一个单词包装到上面的行

任何帮助都将不胜感激。

Answer 1

这是一个可怕的烂摊子。但它确实做你想要的。我认为没有任何好方法可以获得您正在寻找的行为。祝你好运！

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] + "&nbsp;</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>

Answer 2

尝试将其置于固定的g

中

＆＃13;

<div>

＆＃13;

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;
}

＆＃13;

HTML-CSS：如何从最后一个单词开始对齐文本？

2 个答案: