jquery/css 自下而上换行答案

【问题标题】：jquery/css wrap text bottom upjquery/css 自下而上换行
【发布时间】：2012-05-20 04:58:10
【问题描述】：

我正在尝试使用 css 和/或 jQuery 将文本包装在 div 中，以使底线最长。

所以而不是

__________
|this is |
|text    |
|________|

它会说

__________
|this    |
|is text |
|________|

我可以使用

轻松包装文本

    white-space: pre-wrap;

但我找不到任何可以让我这样做的东西。

（我的想法是反转文本，找到换行的位置，在相同的地方应用<br/>，文本继续前进..但我不知道如何检查换行的位置)

【问题讨论】：

一个更现代的副本是stackoverflow.com/questions/22423951/…。

标签： javascript jquery html css text

【解决方案1】：

他们是 jquery 中的一个插件，叫做bacon

有了这个，你可以根据你的需要将文本包装成你想要的任何形状，我知道你必须对它做一些事情，但我认为它可能会对你有所帮助。

$(".baconMe").bacon({
    'type' : 'bezier',
    'c1' : { x : 10,        y : 0  },
    'c2' : { x : -115,      y : 170 },
    'c3' : { x : 35,        y : 340 },
    'c4' : { x : 15,        y : 480 },
    'align'  : 'right'
}

【讨论】：

首先，我不明白这可能对我正在寻找的东西起作用。我希望文本从下到上换行，使顶行最短，而不是形状（我不能做特殊情况，因为这个文本可以是任何东西）。其次，我最终找到了一种写出正确答案的方法，并将其发布在下面。第三，我尝试应用一条具有负斜率的直线，它使我的文本不可见，我尝试排除故障，但根本不知道它是如何工作的（并且文档低于标准），所以我放弃了，并写了我自己的。

【解决方案2】：

我最终选择了倒车路线，检查换行符的位置，然后相应地插入它们。请随意使用我的功能。这个函数接受一个 jQuery 元素（带有已经换行的文本），并将它的文本向上重新换行。

function wrapUp(element){
    width = element.width();
    string = element.text().split(' ');
    element.text('');
    reversed = string.reverse();
    var height = 0;
    for (var i=0;i<reversed.length;i++){
        reversed[i] += ' ';
        element.text(element.text()+reversed[i]);
        if (height != element.height()){
            reversed.splice(i,0,"<br/>");
            i++;
        }
        height = element.height();
        console.log(element.height());
    }
    element.html(reversed.reverse().join(''));
}

【讨论】：

你如何测试换行符？
这个函数的基本作用是获取容器，删除它的内容，将它们一次放入一个，从最后一个开始。它检查容器的高度是否在每次插入后发生变化，无论高度发生变化，都需要换行。所以它会记住换行符需要去哪里，并将它们相应地放置在非反转文本中。