CODEWITHSUNDEEP
csstext
user2897448
user2897448

Reputation:

Wrap text from bottom to top

Anybody know how I could wrap the text in reverse order, from bottom to top? I attached an example image.

[][https://i.sstatic.net/RVsIG.jpg]

Instead of breaking the line after it is full and having an incomplete line at the end, I need to brake somehow from bottom to top, so bottom lines are full and top line is incomplete.

Upvotes: 24

Views: 6450

Answers (9)

Nick Carducci for Carface Bank
Nick Carducci for Carface Bank

Reputation: 531

flex-wrap wrap reverse display direction: rtl; maps to return a span.style.direction = "ltr" element "".split().reverse().map() Array to subsequently append each to the child id="root", ascending by last then latest.

function App() {
  const result = `This is what I want to achieve with your help.`
    .replaceAll("\n", " ")
    .replaceAll(/[ ]+/g, " ")
    .replaceAll(" ", " ~/")
    .split("~/")
    .reverse()
    .map((x) => {
      const span = document.createElement("span");
      span.style.direction = "ltr";
      span.style.margin = "0px 1px";
      //console.log(span);
      span.innerHTML = x;
      return span;
    })
  //console.log(result);
  return result;
}

App().map(x => document.getElementById("root").appendChild(x));
.latest-ascending-from-last-new-word {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  direction: rtl;
}
<div id="root" class="latest-ascending-from-last-new-word"></div>

Upvotes: 0

Torben Nordtorp
Torben Nordtorp

Reputation: 314

6 years later, but fret not! I have found a pure CSS solution!

Turns out you can achieve this result with flexbox, but it's not obvious or very straight forward. This is what I started out with:

A CSS card with text wrongly aligned

I want the header to be "bottom-heavy", the same effect as you describe in the question.

I began by splitting up my string by whitespace and giving them each a <span> parent. By using flex-wrap: wrap-reverse, and align-content: flex-start. You will achieve this:

The same image as before, but the last word has now been overflowed upwards, making it read the wrong way!

Oh no! Now the order is messed up! Here comes the trick. By reversing both the order in which you add spans to the HTML and the direction order of flex with 'flex-direction: row-reverse', you actually achieve the "pyramid-shaped" upwards overflow effect you desire.

The text is now in the proper order, with most of it being at the bottom, creating the desired effect.

Here is my (simplified) code, using react and react-bootstrap:

        <Row className='d-flex flex-wrap-reverse flex-row-reverse align-content-start'>
          {props.deck.name
            .split(' ')
            .reverse()
            .map(word => (
              <span className='mr-1'>{word}</span>
            ))}
        </Row>

Upvotes: 2

Daniel Rizzuto
Daniel Rizzuto

Reputation: 1

Use display: inline-block; on the text div.

Upvotes: 0

Asif Iqbal
Asif Iqbal

Reputation: 1236

There is no general css solution for it. You must have to utilize help of any language. This is one of the solution using PHP:

<?php
$str= "This is what I want to achieve with your help";
$str = strrev($str);
$exp = str_split($str,18);
$str = implode(">rb<", $exp);
echo strrev($str);
?>

Upvotes: 1

Mike Wilday
Mike Wilday

Reputation: 25

If you already know where you want your breaks to take place just use simple HTML breaks to break your content and have it display the way you want. 

<p>This is what<br/>
want to acheive with your help</p>

If you set the breaks manually (and you know where you want them to break) then create them yourself.

You could also try setting separate css width adjustments based on the dimensions of the screen you are seeing the breaking you are not liking and set an @media reference to make the div width smaller to break the text so it doesn't run unevenly across the top of certain size devices.

Upvotes: 0

Venkata Krishna
Venkata Krishna

Reputation: 1776

This is not a formal solution for this problem. But see if this helps.

The HTML CODE

<div id="mydiv">
I can imagine the logic behind the code having to detect what is the last line, detect the div size, and the font size... then measure how many characters it can fit and finally go to the above line and insert the break where necessary. Some font families might make this harder, but trial and error should solve the issue once the basic code is set..
</div>

CSS:

#mydiv
{
    width:1000px;
    line-height:18px;
    font-size:20px;
    text-align:justify;
    word-break:break-all;
}

Here setting the div width around 50 times that of the font-size will give you the precise result. Other width values or font values might slightly disorient the last line, giving some blank space after the last character.(Could not solve that part, yet).

JQuery:

$(document).ready(function(){
        //GET the total height of the element
        var height = $('#mydiv').outerHeight();

        //Get the height of each line, which is set in CSS
        var lineheight = $('#mydiv').css('line-height');

        //Divide The total height by line height to get the no of lines.
        var globalHeight = parseInt(height)/parseInt(lineheight);
        var myContent = $('#mydiv').html();
        var quotient = 0;

        //As long as no of lines does not increase, keep looping.
        while(quotient<=globalHeight)
        {
            //Add tiny single blank space to the div's beginning
            $('#mydiv').html('&#8239;'+myContent);

            //Get the new height of line and height of div and get the new no of lines and loop again.
            height = $('#mydiv').outerHeight();
            lineheight = $('#mydiv').css('line-height');
            quotient = parseInt(height)/parseInt(lineheight);
            myContent = $('#mydiv').html();
        }
        //get the final div content after exiting the loop.
        var myString = $('#mydiv').html();

        //This is to remove the extra space, which will put the last chars to a new line.
        var newString = myString.substr(1); 
        $('#mydiv').html(newString);
    });

Upvotes: 0

Tom Rees
Tom Rees

Reputation: 671

I would not recommend using exotic CSS attributes which aren't even in Chrome & Firefox yet. The best cross-browser solution is to handle this in Javascript when the document loads. Here's a sketch of how to do that:

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

Working JSFiddle is here: http://jsfiddle.net/zephod/hfuu3m49/1/

Upvotes: 5

Mohammad Golahi
Mohammad Golahi

Reputation: 367

Wrap and Nowrap will be rendered by the client-browser, so you can not force the browser to wrap from bottom to top. but you can do that with javascript or asp.

Upvotes: 0

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Well, if that is depending on the text, then you can try something like a word replacer. For example

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

Here is a fiddle for you: http://jsfiddle.net/afzaal_ahmad_zeeshan/Ume85/

Otherwise, I don't think you can break a line depending on number of characters in a line.

Upvotes: 0

Related Questions