div {
  display: inline-block;
  background: gray;
  text-align: justify;
  word-break: break-all;
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

div {
  display: inline-block;
  background: gray;
  text-align: justify;
  word-break: break-all;
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

In the example above, if your screen is small enough that the text wraps, it is filled from first to last line, top to bottom, left to right:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor in
cidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aut
e iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla par
iatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui offic
ia deserunt mollit anim id est laborum.

But I'd like the last line to be filled first, bottom to top, right to left, so something like this:

                                       Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud  exercitation ullamco laboris nisi ut al
iquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint obcaecat cupidita
t non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Is this possible to achieve with CSS?

I went through some text-* settings, but couldn't find anything helpful. Also, I was thinking direction: rtl might help, but I guess I'd rather need something like direction: btt (as in bottom-to-top).

• html
• css
• alignment
• text-align

Share Improve this question Follow edited Mar 9 at 21:42 finefoot asked Mar 9 at 21:12 finefootfinefoot 11.4k1212 gold badges7676 silver badges122122 bronze badges 4

• 2 using JS to manually calculate a value you set to text-indent on container resize – Temani Afif Commented Mar 9 at 21:19
• 3 changing the direction won't help with you here – Temani Afif Commented Mar 9 at 21:24
• What do you mean by “line” and what do you mean by “first” (“first”)? There are no lines here, there is a single paragraph with word wrap. There is no order of selection, everything is selected at once. What do you want to achive? – Sergey A Kryukov Commented Mar 9 at 21:26
• You are right that wrapping may or may not occur even once. But still, there are no lines. – Sergey A Kryukov Commented Mar 9 at 21:47

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 3

Recursively add spaces to the beginning of the line. Something like this:

function placeText() {
  const div = document.querySelector('div');
  const pureText = div.textContent.trim();
  div.textContent = pureText;
  const divHeight = div.offsetHeight;
  updateText();
  function updateText() {
    if (divHeight === div.offsetHeight) {
      div.textContent = `\u00A0${div.textContent}`;
      updateText();
    } else {
      div.textContent = div.textContent.replace(/^\u00A0/, '');
      return;
    }
  }
}

placeText();
window.addEventListener('resize', placeText);

div {
  text-align: justify;
  word-break: break-all;
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Based on the excellent answer above but also setting text-align-last: justify to make sure the last line is aligned properly, too, and, as suggested in the comments, incrementally increasing text-indent instead of inserting space characters:

function placeText() {
  const div = document.querySelector('div');
  div.style.textIndent = '0px';
  const divHeight = div.offsetHeight;
  updateText(0);
  function updateText(indent) {
    if (divHeight === div.offsetHeight) {
      div.style.textIndent = `${++indent}px`;
      updateText(indent);
    } else {
      div.style.textIndent = `${--indent}px`;
      return;
    }
  }
}

placeText();
window.addEventListener('resize', placeText);

div {
  display: inline-block;
  background: gray;
  text-align: justify;
  text-align-last: justify;
  word-break: break-all;
}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>