Automatically add a line break to make a senentence's lines similar in width

1
votes

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.

1
csstypography
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
width and max-width don't scale well in practise when sentence lengths vary and responsive widths are applied. - Swen
There is no clean solution to that, CSS only, though this answer of mine might gives a hint how it could be done: stackoverflow.com/a/42563595/2827823 - Ason

1 Answers

3
votes

You'll need to use:

  • width in vw
  • font-size in vw
  • text-align: justify