Multi-line text padding

Question

I have a following structure:

<div class="1">
  <div class="2">
    2.
  </div>
  <div class="3">
    3.
  </div>
  <div class="4">
    very long line of text
  </div>
</div>

So div 1 has display: block, all the others have display: inline. My goal is to make this very long line of text being displayed like that:

2. 3. very long
      line of text

If I try making div 4 an inline-block or inline-flex and set margin and text-indent properties, then it kinda does what I want, but it also moves whole text down one line like this:

2. 3. 
very long
      line of text

How do I do that properly?

Your class values are invalid in CSS: https://stackoverflow.com/a/31773673/3597276 — Michael Benjamin, Jun 05 '17 at 16:18
@Michael_B their actual names are different, that's just for simplification purpose, but thanks for noticing — Leonid Bor, Jun 05 '17 at 16:20

score 1 · Accepted Answer · answered Jun 05 '17 at 15:39

Use flex to solve this, make the container div display flex.

Make sure your classes start with a letter (Which characters are valid in CSS class names/selectors?)

https://jsfiddle.net/cymozzeL/1/

.t1 {
  display: flex;
}

There is a lot more you can do with this, please have a look at

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

score 0 · Answer 2 · answered Jun 05 '17 at 15:53

If you don't want to use display: flex for compatibility reasons with older browsers, you can make them inline-blocks, align them vertically at the top and then use jQuery to get their widths and calculate the width of DIV4:

jQuery(document).ready(function() {
var width1 = $(".x1").innerWidth();
var width2 = $(".x2").innerWidth();
var width3 = $(".x3").innerWidth();
var width4 = (width1 - width2 - width3 - 8) + "px";
$(".x4").css("width", width4);
});

.x2, .x3, .x4 {
display: inline-block;
vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="x1">
  <div class="x2">
    2.
  </div>
  <div class="x3">
    3.
  </div>
  <div class="x4">
    very long line of text very long line of text very long line of text very long line of text very long line of text very long line of text very long line of text
  </div>
</div>

(Note: The -8 in the calculation is done by trial and error - it's necessary because of some whitespace created by the linebreaks in the HTML code which otherwise would break DIV4 into the next line)

thank you for the answer, unfortunately, I have to use pure css — Leonid Bor, Jun 05 '17 at 16:19

Multi-line text padding

2 Answers2