>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3572693. --> Reported by: [tonypaulbarker](https://www.drupal.org/user/807484) Related to !14 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>Reported in LocalGov Drupal slack, on the page at <a href="https://www.northdevon.gov.uk/council/voting-and-elections/annual-canvass">https://www.northdevon.gov.uk/council/voting-and-elections/annual-canvass</a> has an email address that is wider than a mobile display and no wrapping occurs. In this case, it is important that users can see the whole email address so truncating the link doesn't seem like the way to go.</p> <p><img src="https://www.drupal.org/files/issues/2026-02-10/image%20%289%29.png" alt="Screenshot of the long email address breaking out of the container"></p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <p>Add a long email address with a CKEditor field and save the page.<br> Observe the email address breaks out of the layout container so horizontal scrolling appears on mobile.</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>@hannahdigidev suggested the following snippet, which is in use for Brighton.</p> <pre>/* Allow long link titles to wrap on small screens. */<br>.rich-text a[href^="mailto:"],<br>.rich-text a[aria-label^="http"],<br>.rich-text a[aria-label^="www"] {<br>&nbsp; display: inline-block;<br>&nbsp; word-break: break-word;<br>}</pre><h3 id="summary-remaining-tasks">Remaining tasks</h3> <p>Evaluate the snippet. Will it solve the problem?<br> Describe any risks and potential side effects.<br> Propose a suitable location for the snippet in the localgov_base theme.<br> Set up code on a branch / MR for testing.</p>