• Resolved andynick

    (@andynick)


    Is there a way to prevent words breaking in the header?
    I’ve been trying via css in my child theme but I can’t seem to get it to work.
    https://www.workingsheepdog.co.uk
    (There is no hyphenation on this page, but it is a problem, so I have to shorten the page headers).

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

    Here’s some helpful information on controlling hyphens and word breaks with CSS:

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

    https://css-tricks.com/almanac/properties/w/word-break/

    If you need more help, please provide a link to an example of where the word breaks/hyphenation are occurring.

    Hope this helps!

    Thread Starter andynick

    (@andynick)

    Thanks Christi, I’ve tried one or two methods suggested on the links you provided. The latest is:
    .entry-title {
    font-size: 1.7em;
    font-weight: 400;
    font-family: “Arimo”, “arial”, “sans-serif”;
    text-shadow: #c9cccb 2px 2px 2px;
    word-break: keep-all;
    hyphens: none;
    text-transform: uppercase;
    }

    This is a typical page:
    https://www.herding-dog-training-border-collie-sheepdog-dvd.com/sheepdog-training-23-traditional-sheepdog-commands/
    The Header is broken mid-word – I can’t believe the DEFAULT on the Twenty Sixteen theme requires words to be broken in headlines!

    Hi andynick,

    That’s actually a whitespace thing, not a hyphen thing. Try adding this declaration to your rule:

    white-space: nowrap;

    Of course, this means your headings will be encroaching on your sidebar, which is normally not a good thing. That is why the default theme (and most themes) wrap lines that are too wide for their containers.

    Hope this helps!

    Thread Starter andynick

    (@andynick)

    Hello Christi,
    Thanks for your help with this.
    I want the words to wrap onto a second line if the title is too long, but I want the whole word to go to the next line rather than a random part of the word (which looks terrible).
    I also want to preserve the responsive nature of the theme. More than 60% of our visitors use phones and tablets.

    Okay, sorry for the confusion. Don’t add the white-space bit from my last message.

    I’m not seeing any hyphens in your titles. If you still are, what browser are you using, and have you tried refreshing the page and/or clearing your cache?

    Thread Starter andynick

    (@andynick)

    Hello Christi,
    Believe me, I’m getting hyphens where they shouldn’t be – regardless of the browser (Safari, Chrome or Firefox all give the same result – and that page is brand new).

    The header should read:
    Sheepdog Training 23 – Traditional Sheepdog Commands
    What I get is:
    Sheepdog Training 23 – Traditional Sheepdog Com-
    mands

    I was hoping someone might be able to help me identify the css selector I should target to prevent hyphenation where I don’t want it.
    My ccc editor application suggests h1.entry-title – but that doesn’t seem to work. The css I quoted above does change the font and the size of font – and it changes the text to capitals, so I must be doing something right.
    I just need to know what css to use to prevent hyphens in my titles – but keeping word wrapping to preserve the responsive nature of the page.

    Your selector should be fine, but I think you need some vendor prefixes. I only see the hyphen in Safari, not Firefox. To check browser support for hyphens: https://caniuse.com/#search=hyphen

    Try adding this to your rule:

    -webkit-hyphens: none;

    above:

    hyphens: none;

    For IE support, add:

    -ms-hyphens: none;

    Let me know if that fixes it for you.

    Thread Starter andynick

    (@andynick)

    Hello Christi,
    That’s done it – perfectly – thanks!
    Best wishes, Andy

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Prevent hyphenation in header’ is closed to new replies.