I have an Austrian site here (and the German language loves compound nouns).

A view produces a raster of 6 article teasers, but some titles exist of one single word of more than 30 characters - and no, it cannot be shortened because it is a proper name.

I'd like to be able to manually add ­ tags into these titles, as everything else will not be language-sensitive. CSS word-wrap or word-breaks are no options (not breaking at syllable boundaries). Also, adding an ellipsis is also not an option.

This is Drupal 8, so no "HTML Title" modules available.

The theme does a simple

{% if title %}
  <h1>{{ title }}</h1>
{% endif %}

I am aware of possible security implications and only want to allow this one tag. Alternatively, I am open to other suggestions fulfilling the stated need!

  • Hahaha, oh yeah. Nahrungsmittelunverträglichkeit or Bundesausbildungsförderungsgesetz . Welcome to Drupal Answers :)
    – leymannx
    Oct 9 '18 at 13:44
  • International friends always make fun of us because of that. Some even find it practical. As an IT guy I don't quite like it that much but that's the way it is. Thanks for the welcome!
    – tgoeg
    Oct 10 '18 at 11:40

Our workaround inhouse: We've trained our editors to use Alt + 240 (hold alt key and press 2 4 0 on numeric pad) to manually add soft hyphens in title fields.

Is a bit weird because your editors don't see the hyphen in a text input field, but you can prove its existance by deleting it (backspace after such a hyphen will NOT delete the visible letter on first press)

  • That's indeed a very quick solution without any other intervention needed. No Windows here, on linux, Ctrl-Shift-u ad does the trick. I did the same with a menu entry that should NOT break on a normal hyphen by using "non-breaking hyphen" but did not think about it here, thanks! Here is a good summary of some special symbols that might come in handy: cs.sfu.ca/~ggbaker/reference/characters
    – tgoeg
    Oct 10 '18 at 11:31

I see two options:

  1. Add some JS hyphenation library with a German dictionary included. After you attached the library to your page this probably fires on just some CSS class you need to have added to your titles. For example: <h1 class="wordbreak-here">.

    Side note: More than one <h1> on a single page is bad for SEO.

  2. Introduce a new text field (formatted) and print that as title. Then editors can add whatever markup you allow them to add.

    You may want to have a look at Automatic Entity Label which lets you hide the normal node title field and retrieve that (maybe sanitized then) from your new title text (formatted) field.

Last but not least, search for "Drupal 8 markup node title" or something similar. I found HTML Titles for Drupal 8 under one of the first results. Sounds promising.

  • Thanks for your suggestions, very much appreciated. Both solutions sound like the "proper" way to fix it, that is, automatically without editors needing to take care of it. A side note to your side note: More than one <h1> is also unacceptable accessibility wise :-) The module referenced is not (yet) covered by the security advisory policy, which is a no-go for my application. Seeing the "easy way out" solution by @Hudri however I couldn't resist.
    – tgoeg
    Oct 10 '18 at 11:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.