Remove Hyphens from Blog Post Titles

  • Resolved Sal Barry

    (@sal-barry)


    8 years ago

    I am helping a friend with his WordPress blog.

    When he looks at his blog posts on Firefox, Chrome or Mobile, sometimes the blog post titles hyphenate — and he does not want that.

    Blog post title with hyphen

    When I look at his blog posts on Firefox, Chrome or Mobile, they DO NOT hyphenate.

    Blog post title without hyphen

    I am at a loss because I cannot replicate the problems that he is having.

    WP Version: 4.7.3
    Theme: 2016 (Child)
    URL: https://www.buffalohockeybeat.com/

    I have tried inserting the following CSS…

    h2.entry-title {
	hyphens: none;
}

    …in the child theme’s style.css file, as well as “Customizing Additional CSS” via Appearance > Edit CSS. Putting that CSS in either place does not have any effect.

    Can anyone shed any light on this?

    Thank you.

    • This topic was modified 8 years ago by Sal Barry.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    try adding

    word-break: keep-all;

    to that.

    Thread Starter Sal Barry

    (@sal-barry)

    OK, I added it, and it had no change.

    Here is what I put in my child theme style.css:

    h2.entry-title {hyphens: none;
		word-break: keep-all;}

    Of course, what is really strange is that nothing is working for this CSS selector. Even when I add something like background-color or font-size, it also has no effect.

    • This reply was modified 8 years ago by Sal Barry.
    Moderator bcworkz

    (@bcworkz)

    Are you sure you have the correct selector? For example, twentysixteen titles are H1. Try just .entry-title. Or use your browser’s CSS inspector to determine the correct selector.

    FWIW, I was able to replicate the hyphenation and hyphens: none; alone corrected it.

    Thread Starter Sal Barry

    (@sal-barry)

    Thank you both for your help thus far.

    When I view the source, here is the code in question: 

    <h2 class="entry-title">
<a href="https://www.buffalohockeybeat.com/report-sabres-face-rangers-new-york-winter-classic/" rel="bookmark">
Report: Sabres to face Rangers in New York Winter Classic
</a></h2>

    So it does appear to be h2 in this case.

    I will try removing the h2 in my custom css and see if that works or not.

    Thread Starter Sal Barry

    (@sal-barry)

    @bcworkz and @sterndata,

    Thanks to your help, I figured it out.

    There were actually three problems.

    1. I needed to use the compound selector of:

    a h2.class-entry

    2. Actual blog post pages use this selector for the headline:

    h1.class-entry

    3. My friend was using an iPhone, which was foisting the breaks, so I added in the browser-specific prefixes:

    -moz-hyphens:none;
-ms-hyphens:none;
-webkit-hyphens: none;
hyphens:none;

    These three things combined did the trick, eliminating the unwanted hyphenations.

    However, I would not have figured these out if not for your above replies, as they helped me solve the problem.

    Thank you both.

    Sal

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Remove Hyphens from Blog Post Titles’ is closed to new replies.