1

I want titles for my blog posts to automatically be "evened out" in width. Also, the top line should always be longer than the bottom line, but they should always be similar in width.

Please note that I'm looking for a CSS only solution. I know I can do this easily with JavaScript or PHP, but I'm just wondering if there's an easier responsive solution.

An example below:

Default behavior:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut

labore et dolore magna aliqua.

Want I want:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua.

Swen
  • 767
  • 1
  • 9
  • 31
  • You could get mostly there by using a `width` or `max-width` on the containing element. But CSS is just simple design. You can't necessarily ensure the top line is longer than the bottom line, though most scenarios should end up that way, depending on the words. To ensure something like that, you need to use javascript. – Michael Coker Mar 09 '17 at 22:53
  • `width` and `max-width` don't scale well in practise when sentence lengths vary and responsive widths are applied. – Swen Mar 09 '17 at 22:56
  • 1
    There is no clean solution to that, CSS only, though this answer of mine might gives a hint how it could be done: http://stackoverflow.com/a/42563595/2827823 – Asons Mar 09 '17 at 23:58

1 Answers1

3

You'll need to use:

  • width in vw
  • font-size in vw
  • text-align: justify
Rounin
  • 27,134
  • 9
  • 83
  • 108