Don't break words in title class

Question

I have a Wordpress website...

I am dynamically populating titles of posts within a carousel on a page.

The post populate like below. (I have a class wrapped around the post titles for added selector).

<span class="p_title"> 5 Technologies that will Revolutionize Mobile </span>

The problem occurs when post titles are as large as above -- which occurs in enough instances to care.. eg below..

5 Technologies that will Revolutionize M
obile

I would like to set the wrap to not break right in between the WORD but after it.

5 Technologies that will Revolutionize
Mobile

Currently my css for .p_title is:

.p_title {
    display: inline-block !important;
    float: left;
    text-align: left;
    width: 100%;
}

Any suggestions?

Answer 1

Long words shouldn't break inside a word unless the CSS word-wrap property has been set to word-wrap: break-word; . If it has, you should be able to revert to the default behavior of only breaking between words by setting the property to word-wrap: normal; .

Answer 2

You can try defaulting both the white-space and word-break back to normal:

.p_title {
    display: inline-block !important;
    float: left;
    text-align: left;
    width: 100%;
    word-break: normal;
    white-space: normal;
}

Something else is breaking it up. If it's script related, this may not do anything to help you.