Since the columns that contain content on your website will shrink and re-size as it’s viewed on different screen sizes there are sometimes issues with where lines and words break. Long words can be particularly troublesome in columns that shrink to become too narrow.
On this page:
- Example
- Browser Default
- Content Management Systems (CMS)
- Content Creator’s Options
- Word Break Fixes
- Lines Break Fixes
- Learn More
Example
A frequent culprit for long words is email addresses, especially when they are added to a narrow sidebar column. It used to be common for them to overflow the content area, like so:
In modern browsers we usually see each character wrapping to the next line as the area gets smaller, like so:
Unfortunately, it will sometimes break at confusing parts of the word or email address.
Browser Default
Most recent versions of popular web browsers will break words with a soft hyphen to prevent overflow. The browser will automatically break words at appropriate hyphenation points, following whatever rules it chooses. In some cases you may not be happy with how or where the lines and words break. Each browser handles it slightly differently so the issue you see may not exist for all visitors.
Content Management Systems (CMS)
The Drupal or WordPress CMS your website is built with, may also have ways to manage these issues. As of 2024 our Drupal websites favor the browsers default behavior and do not allow content creators to use some of the options noted below. Changes are expected in future code releases that we anticipate will provide more control by content creators.
Content Creator’s Options
Managing line and word breaks is a balance between control of content column widths, font sizes and in some cases encouraging the browsers to wrap lines of text and break words differently.
Below are some options you can experiment with to try to fix related issues but they may not be available for all content. For example, they cannot be added in Plain Text fields in a content management system. If you do try any of them, be sure to review your content on numerous device sizes.
In cases where none of the below options work, we may need to change the design. Contact the web team if issues cannot be resolved with the below options or are prominent throughout the site.
Word Break Fixes
In some interfaces, you can suggest to the browser where you’d like it to break a word and if you want a hyphen or not. You will have to edit the HTML source code.
Soft Hyphen, ­
If you do not like where the browser is choosing to break a long word, add the Unicode encoding for the soft hyphen: ­
Hopefully, you won’t have any articles about pneumonoultramicroscopicsilicovolcanoconiosis but if you do you will probably want to edit the source code, like so:
pneumonou­ltramicro­scopicsil­icovolcano­coniosis
Word Break Opportunity, <wbr> Tag
The tag <wbr> does the same thing but will not add a hyphen. In the email example, it’s important not to add the <wbr> tag to the email link, only add it to the text displayed on the screen, like so:
<a href=”mailto:infoandadmissions@austin.utexas.edu”>
info<wbr>and<wbr>admissions@<wbr>austin.<wbr>utexas.<wbr>edu</a>
Lines Break Fixes
If lines of text are not breaking as expected, it could be because of a non-breaking space Unicode in the Source code. Alternately, adding a non-breaking space code string may help you to force the line not to break in some browsers.
Non Breaking Space,
Similar to the ­ Unicode encoding above, is a code string that creates what appears to be a blank space but is treated as an alpha-numeric character. The browser treats the space as part of a word instead of a blank space. Usually, the encoding is added in content by accident from copy/paste and it is best to remove them from the source code.
However, there are a few instances when it may be helpful to add, especially if you’re trying to get two areas to respond similarly, such as in a table header. This is a pretty rare use case but you can try adding the code between words to suggest that the browser not break the line.
Learn More
Article gets into the code options for Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc). Specifics and more examples of the <wbr> tag on the Mozilla developer site. Also see https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens.
