Search code examples
ckeditorzurb-foundationblockhtml5boilerplate

How to wrap email addresses to fit in fixed width box


I have a problem, see the image below:

My bug. For security reasons I have blurred the telef numbers and e-mail addresses

As you can see, the text is overflowing instead of breaking the text into a new line. My question is: How can I solve this issue?

The text is being inputted via CKEditor. I leave you with the code:

<fieldset>
    <legend><?php echo $myData09 ?></legend>
        <div class="small-11 small-centered columns text-center margem_cima">
            <ul class="small-block-grid-3 text-left">
                <li><?php echo $myData10 ?></li>
                <li><?php echo $myData11 ?></li>
                <li><?php echo $myData12 ?></li>
            </ul>
        </div>
</fieldset>

Solution

  • The email addresses are too long and won't wrap as is. You could replace the displayed email address with 'Email' and link it to their address using mailto.

    Or you could use word-wrap: break-word or one of the options in this article.

    -ms-word-break: break-all; /* Be VERY careful with this, breaks normal words wh_erever */ 
    word-break: break-all; /* Non standard for webkit */ 
    word-break: break-word; 
    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    hyphens: auto;