I have a dynamic heading within a div of a specified width.

Given a heading "Hello World, My name is Bob.", the div width will make the line break after "name", giving me:

Hello World, My name
is Bob.

Is there a simple way to invert that line break behaviour so that it would break after "Hello", as so:

Hello
World, My name is Bob.

That is to say, a way to ensure the top line os always the short one.

OR

A way to keep both lines at a similar length:

Hello World,
My name is Bob.

I am developing a wp-theme, so preferably a solution that's default in wordpress (I don't want to add plugins), or something that can be done in PHP, HTML, CSS or JS

CodePudding user response：

Ideally this would be solved with CSS, so the browser can handle all layout flow changes. But I believe the closest thing available in CSS would be text-align: justify; which doesn't affect where lines of text wrap, only how the space within a line is distributed.

A solution using PHP (or any server-side language) wouldn't be a good idea because it will be unable to account for the width of the text's container, which will vary based on each user's viewport. You could try to guess, but you'd probably end up wrong about half the time and those users would either see a bunch of extra line breaks in the wrong places or text that doesn't use the full width available to it.

That means you'd need to use JavaScript to accomplish this, but this would have several drawbacks. You'll need to insert line breaks manually, which means the text will reflow after the initial load, once the JavaScript is able to run. Depending on the user's internet connection and device speed, this could be delayed enough that it would cause elements to move underneath their cursor.

You'd also need to re-run this code, removing your extra line breaks and introducing new ones, any time the size of a container changes. You can use an API like ResizeObserver to watch for these changes and respond to them, but it will likely cause noticeable reflow when users resize their viewport (e.g. if they turn a phone between landscape and portrait mode).

But obviously these are pretty important drawbacks, which can impact on the aesthetics of your theme. What problem are you trying to solve, exactly? Might there be a different approach you could take that wouldn't have these drawbacks?

CodePudding user response：

I discovered a way! After doing some more googling and after searching specifically "line-break: revert;" did I find questions like mine.

Most helpful being Wrap text from bottom to top with a js solution, although there were some nitpicks.

But after scolling down there was a more recent solution using css flexbox. Though I'm not using react, I used the flexbox idea and built a simple solution in php:

$title = get_the_title($post->ID);

$splitTitle = explode(' ', $title);

if(strlen($splitTitle[0]) < 3){
    $splitTitle[0] = $splitTitle[0]." ".$splitTitle[1];
    unset($splitTitle[1]);
}

$reversedTitle = array_reverse($splitTitle);
foreach($reversedTitle as $word){
    echo "<span>&nbsp;".$word."</span>";
}

I didn't want single or two letter words like "A" or "An" to be left alone on the first line, so I check for those and put them in a string together back in the array.

Then I just applied the flexbox styles to the parent div:

.title {
    display: flex;
    flex-wrap: wrap-reverse;
    align-content: flex-end;
    flex-direction: row-reverse;
    justify-content: flex-end;
}