Spliting Text Nicely over Multiple Lines (i.e. for titles) - php

Question

I'm fighting over a way to have text wrap nicely to fit into set div boxes. Browsers wrap the text if it's too long to fit on one line which is expected, but this can often lead to rather nasty looking presentation.
For example, this looks fine:
This is the title
But if I have a longer title, it may end up wrapped like this:
This is a slightly longer
title
As you can see the second one doesn't really look very nice, what I'm aiming for is something like this:
This is a nicer
wrapped title
I know how big the containing DIV will be, so that's not a problematic variable, but I'm trying to wrap my mind around all the possible ways of achieving nicely formatted titles and their flaws. So the question is, what would be the best way of doing this? I can think of a few ways, but they start to get exponentially more complicated if it wraps over more than 2 lines.
EDIT:
I'm currently using this - https://xnode.org/paste/19 - to try and even out the split lines, although I'm sure it's far from perfect.

Answer 1

You can remove the newlines and then use wordwrap function

Answer 2

Sounds like a job for the wordwrap function http://php.net/manual/en/function.wordwrap.php

Answer 3

Try using wordwrap function and give this CSS for the DIV:
div {
text-align: justify;
}

Answer 4

If http://fittextjs.com/ doesn't do the trick, try something along these lines...
Count the characters in your title and decide if it is going to need 1 line, 2 lines 3 lines, etc. (there will be some trial & error involved)
Replace all the spaces apart from where you want line breaks with (non-breaking spaces) and let the browser do the word wrapping.
In other words, in your This is a nicer wrapped title example, there are 29 letters, so you need a break around half way or just after, so replace the first non-breaking space after position 14 or 15 with a regular space ie between 'nicer' and 'wrapped', and that should do the job. Same thing in thirds or quarters for longer lines.
Sorry no code but from the examples you gave above you should be ok coming up with your own implementation.

Answer 5

I've created this jQuery plugin that does what you want
$.fn.prettyBreak = function () {
return this.each(function () {
var element = $(this);
var elementLineHeight = element.css("line-height").replace("px", "");
var elementContent = element.contents();
element.wrapInner("<span style='white-space: nowrap'>");
element.find("br").remove();
var textWidth = element.find("span").width();
element.html(elementContent);
var elementText = $.trim(element.text());
if (element.is(":visible") && textWidth > element.width() && element.height() < elementLineHeight * 2.1) {
var middle = Math.floor(elementText.length / 2);
var before = elementText.lastIndexOf(" ", middle);
var after = elementText.indexOf(" ", middle + 1);
if (middle - before < after - middle) {
middle = before;
} else {
middle = after;
}
var s1 = elementText.substr(0, middle);
var s2 = elementText.substr(middle + 1);
element.html(s1 + "<br> " + s2); // note the space after the tag
} else {
element.html(elementText);
}
if (element.is(":visible")) {
element.css("opacity", 1);
}
});
}
Usage:
$(document).on("ready", function () {
$(".pretty-break:visible").prettyBreak();
setInterval(function () {
$(".pretty-break:visible").prettyBreak();
}, 1000);
});
Github link: https://github.com/SumoSoft/PrettyBreak