I have a post title consisting of two words with a slash between. It seems that the web considers this to be one word rather than two, and it doesn’t wrap when viewed on a phone. I would like for this title to wrap where the slash is. Is there a way to specify that a slash should be treated like a hyphen for word wrapping purposes?
I have not found a way to specify that a slash should be treated like a hyphen.
One potential workaround is to add the style overflow-wrap: break-word;. This will allow long words to break without affecting the breaking of other words. But it will just break at whatever character would cause overflow, it doesn’t prefer breaking at slash characters.
Breaking at specific characters, such as the slash character, can’t be done in CSS, you have to do it in HTML. If you have access to the HTML code (in a post body, for example) you can choose any of these solutions:
<wbr> word break opportunity tag​ zero width space​ zero width spaceBut these don’t work for a post title in WordPress, because WordPress will filter out any code you enter into a post title. The way to solve this is to insert one or more zero-width-space characters directly into the title. One way to do this is to use Character Viewer (Mac) or Character Map (Windows), although of course they are a bit tricky to use when it comes to spaces because spaces are invisible. In the case of Character Viewer, when you search for arrow, lots of matches appear, but when you search for zero width space, it appears that no characters were found. But if you click where the blue square is in the second image below, you’ll discover that the character was found, it’s just invisible.
And you can see the result:
More details are available in this answer on Stack Overflow, including a snippet to demonstrate the differences between the various HTML solutions.