Designer, Coder & More...

Better formatting of Drupal Titles

Make your Drupal titles read better

Drupal offers very little control over the display of titles.

For example, let's say I have a long title like "A full guide to learning cooking in a day". Depending on how the theme has been set up, the title could break in an odd place. For example, it might display as

"A full guide to learning cooking in
a day"

This looks dumb. You could of course tweak the CSS for each title, but that is hardly efficient.

The solution is to replace the node title with a custom field.

  1. On your content type, create a new field called "title". Give it a widget type of "Long Text". Make sure it is 2 rows long (instead of the default of 5).
  2. Set the text format to "filtered text".
  3. Save the field. Then go back to the field edit screen and change the text format to one that allows the HTML tag. You might need to go admin/config/content/formats to add the tag to one of the text formats, as it's not available by default.
  4. Download and enable Automatic Entity Label module.
  5. Download and enable the Token module.
  6. Go to "admin/structure" and select your content type.
  7. Click on "Auto Label" and then "Browse Available Tokens". Select the token for the field you created in step 1.
  8. Before saving, check the radio button next to "Automatically generate the label and hide the label field"
  9. We now need to make sure that the token doesn't escape HTML characters. So click on "Manage Display" and select "Custom Display Settings" at the bottom of the screen. Check the box for tokens and then hit Save.
  10. Now scroll back up to the top of the page, and click on "Tokens".
  11. Finally for the "Title" field (which you created in step 1), select "Plain text" under format.

Now when you create a node, you will have a new Title field. You can then insert a line break by entering the HTML character.

If your text filter allows for automatic line and paragraph breaks, you can simply insert a new line.

You might have tweak your CSS so it respects the tag (as some CSS reset methods disable it), but you can finally control the breaking of titles.

style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-3945684648599994"
data-ad-slot="7784927124">