从下到上换行文字

Question

有人知道如何从底部到顶部以相反的顺序包装文本吗？我附上了一个示例图片.

PS精炼的问题:在它完整并且在末尾有一条不完整的线之后不再断线......我需要以某种方式从下到上制动,所以底线是满的而顶线是不完整的.

Answer 1

我不建议使用奇怪的CSS属性,即使在Chrome和Firefox中也没有.最好的跨浏览器解决方案是在文档加载时在Javascript中处理此问题.这是如何做到这一点的草图:

$(function() {
    $(".title").each(function(i,title) {
        var width = 0;
        var originalHeight = $(title).height();
        var spacer = $('<div style="float:right;height:1px;"/>').prependTo(title);
        while (originalHeight == $(title).height()) {
            spacer.width( ++width );
        }
        spacer.width( --width );
    });
});

工作JSFiddle在这里:http://jsfiddle.net/zephod/hfuu3m49/1/

Answer 2

好吧，如果这取决于文本，那么您可以尝试诸如单词替换器之类的东西。例如

var words = "This is what I want to achieve";
var newWords.replace("what", "what <br />"); // note the line break
document.write(newWords);

这是给您的小提琴：http ://jsfiddle.net/afzaal_ahmad_zeeshan/Ume85/

否则，我认为您不能根据一行中的字符数来换行。