jquery / css自下而上包装文字 [英] jquery/css wrap text bottom up

问题描述

所以而不是

$

  __________ 
 |这是| 
 | text | 
 | ________ | 
  

它会说

  __________ 
 | this | 
 |是text | 
 | ________ | 
  

我可以使用

  white-space：pre-wrap; 
  

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

（我想过的一个想法是翻转文本，找到换行的位置，在文本中应用< br /> 同样的地方，随着文本前进..但我不知道如何检查行包装）

解决方案

我结束了取走路线，倒车，检查断线位置，然后相应地插入它们。请随时使用我的功能。这个函数接受一个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（''））; 
} 
  

I am trying to wrap text in a div using css and/or jQuery such that the bottom line is the longest.

so rather than

__________
|this is |
|text    |
|________|

it would say

__________
|this    |
|is text |
|________|

I can easily wrap the text using

    white-space: pre-wrap;

But i can't find anything that would let me do this.

(one thought i had would be to reverse the text, find where the line wrapping happens, apply a <br/> in the same places, with the text going forward.. but i dont know how to check where the line wraps)

解决方案

I ended up taking the route, of reversing, checking where the line breaks were, and then inserting them accordingly. Please feel free to use my function. This function accepts a jQuery element (with text that already wraps), and re-wraps it's text upward.

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(''));
}

这篇关于jquery / css自下而上包装文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！