• Resolved Bobslee

    (@bobsleeuwenhoek)


    Apparently the theme can’t handle long words too well: in post previews, they are just randomly cut off with no regard for spelling or grammar, resulting in some rather ugly post titles when the text field is too narrow. Can this be solved somehow?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hi there,

    What do you mean by post previews? Can you please provide a link to your site to a post where the title is being cut off like you describe?

    Or if you don’t want to share a link to your site here, please take a screen shot where the problem is visible, and share it here using a tool like https://snag.gy so we can see it.

    Thread Starter Bobslee

    (@bobsleeuwenhoek)

    I don’t like to share a link, but here is an example of what I mean: https://snag.gy/BVnqpZ.jpg. I meant the ‘overview’ blocks of posts on the main page and such.

    As you can see, the name is too long for one line, so it just breaks it off with no regard to grammar rules.

    I understand that this might be an unhelpful example, seeing how the pasta has an uncommon Italian name, but my own language (Dutch) has a lot of extremely long words, and I run into this problem a lot when typing recipe titles in Dutch. I’d think that somehow it might be possible to have WordPress know where to properly break a ‘normal’ word that isn’t the name of a pasta.

    Okay, I see what you mean.

    The issue here is that this theme doesn’t support automatic hyphenation of words, but we can fix this with some CSS. Add this in Additional CSS in the Customizer:

    /* Add hyphenation for long words in post
     * titles on front page post thumbnails
     *  and in the single-post view.
    */
    h1.entry-title, h2.entry-title {
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      hyphens: auto;
    }

    I tested this with the word meervoudigepersoonlijkheidsstoornissen in a title, and it worked fine:

    My Core Sandbox Just another WordPress site

    There are two caveats to this, though:

    1) The site must be set to the language in question. So Dutch text will only be hyphenated properly is the site language is set to Dutch.

    2) An appropriate hyphenation dictionary must be available in the browser that’s being used to view your site. So depending on the browser a visitor to your site is using, results may vary.

    These are limitations of the code itself, and not something we can address from the theme’s end.

    You can also set the value for hyphens to manual, and then you can include special characters in your titles at suitable points where the word can be cut off. That would allow you to use different languages (like Italian pasta names), and still have them hyphenated correctly.

    You can see these links for more info:

    https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

    https://css-tricks.com/almanac/properties/h/hyphenate/

    Thread Starter Bobslee

    (@bobsleeuwenhoek)

    Thanks for the help. Apparently, hyphens:auto does not work properly in Google Chrome for some reason… That, combined with the fact that changing the site language also changes the backend /wp-admin/ language will probably result in me having to manually set breakpoints in the titles.

    Thanks again!

    Apparently, hyphens:auto does not work properly in Google Chrome for some reason

    It’s working for me in the site where I tested it, so it might be something misconfigured in Chrome on your end.

    That said, setting the breakpoints manually will give you the most consistent results across browsers and screen sizes, and if you don’t want the interface language in the dashboard to change is the only option, yes.

    As a workaround, could the OP reduce the default size of the titles? They are quite big by default. I’m using Dyad 2 and the OP appears to be using Dyad. The following solved this problem for me:

    /* On blog page reduce font size of h2 entry title */
    
    .blog h2.entry-title {
        font-size: 26px !important;
    }

    @ukandrzej, that’s definitely another option, though for really long words like the example I tested above that doesn’t make much of a difference – the word still requires hyphenation even at 20px.

    And generally it’s better to avoid using !important in your CSS, as that could again affect later changes you try to make.

    Instead, to change the title font size on only the front page post thumbnails you can use this:

    .posts .entry-title {
    	font-size: 26px;
    }
    Thread Starter Bobslee

    (@bobsleeuwenhoek)

    @ukandrzej, thank you for noticing that, for I did not notice that I was using Dyad instead of Dyad 2. And here I was, wondering why so much functionalities were missing when I ported my website from WordPress.com to a www.ads-software.com host… Guess this explains a lot…

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Line break in topic title?’ is closed to new replies.