Recently I ran into a road block when working on a website where I needed to take the names of gourmet chef’s, add them as the page title, then display them split onto two lines. I thought CSS word-break might bail me out, but no joy; was not working for my situation. I then Googled for solutions and found a StackOverflow post that suggested CSS word-spacing. That failed miserably as well. The solutions was to code a WordPress function then apply it to where I was echoing out the titles.

// split name
if (!function_exists('the_title')) {
	function the_title($name) {
		if($name!='') { return get_the_title($name); }
		else return false;
	}
}

if (!function_exists('split_name')) {
	function split_name($name) {
		if(strpos($name,' ')!==FALSE) {
			$name_arr = explode(' ',$name);
			if(count($name_arr)==2) { return $name_arr[0].'<br/>'.$name_arr[1]; }	
			elseif(count($name_arr)==3) { return $name_arr[0].' '.$name_arr[1].'<br/>'.$name_arr[2]; }
			else { return $name; }	
		} else { return $name; }
	}
}

Here is a look at my template code:

<?php echo split_name(get_the_title()); ?>