CODEWITHSUNDEEP
htmlcss
Michael Wood
Michael Wood

Reputation: 101

Headings will not word-break

I'm not sure where the problem is coming from but my h1 and h2 takes are splitting the word rather than breaking word-breaking.

Here is a link to the site I'm working on https://helium.marketing

I've tried manually adding a snippet after a bunch of Googling but nothing seems to work. Here's the snippet.

    p, h1, h2, h3, h4, h5 {
        white-space: pre-wrap;       /* css-3 */
        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-wrap: break-word;       /* Internet Explorer 5.5+ */
    }

Upvotes: 1

Views: 1915

Answers (2)

Michael Wood
Michael Wood

Reputation: 101

The problem turned out to be the white-space: pre-wrap; needed to be white-space: normal; and overflow: visible;

It didn't fix it when I injected the code in Chrome but on a browser refresh, it resolved the issue. Thanks everyone!

Upvotes: 2

Rachel Gallen
Rachel Gallen

Reputation: 28563

The property you're looking for is not word-wrap, it's word-break Check out the snippet example.

Hope this helps

h1, p {
  width: 100px;
  word-break: break-word;
}
<h1>Hello World</h1>
<p>Last night, I had the best steak ever in the nearby town restaurant</p>

Upvotes: 0

Related Questions