Using Word Break on a specific word using CSS

Question

I'm trying to break a specific word using css.

The word is "sales/telemarketing", and I'm trying to break the word after the "/tele" part. I'm trying to avoid using <br> as it might affect the way the layout for the paragraph tag.

Is there a way to break it using CSS?

Answer 1

I know you said you want to avoid <br>, but there is <wbr>..

jsfiddle demo

Example usage:

<p>some random text and stuff sales/tele<wbr>marketing some more words here</p>

If you re-size the p, the word will break after tele.

See MDN

Sadly, there is limited support for <wbr>, as it isn't supported by IE10.

---

I just thought of a random CSS alternative..

jsFiddle demo

HTML

<p>some random text and stuff sales/<span>tele</span> marketing some more words here</p>

CSS

span {
    margin-right:-4px;
}

Basically, you just include a space after tele, therefore it breaks to a new line.. By selecting the word tele, you can remove the space.. not ideal - but it works nonetheless.

Answer 2

You cannot specify a word division point in CSS (except in a contrived way, which would be just an unreliable emulation of the proper way). Instead, include a hyphenation hint, the soft hyphen, U+00AD, either by entering it directly if you know how to, or using the reference ­:

sales/tele­marketing

You can add other hyphenation hints to the same word if you like. And you can add <wbr> after / to specify an allowed direct break point (no hyphen appears if the string is divided).