Can you wrap text on an @ symbol?

Question

Is there any way to wrap text just before or after the @ symbol in an email address? HTML or CSS, or perhaps js/jQuery are all possibilities for a solution.

I'm trying to tidy up an admin page of a website and reduce the width of some columns without losing visual data, and this is the prime candidate!

With HTML and CSS you can't specify where the break would occur, only that you can force it *to* break. So you'd need JavaScript to break it specifically at the `@`. But you haven't shown what you've tried in your question. — j08691, Sep 29 '15 at 16:15
Unless I mis-understand you @j08691, this isn't entirely correct, as there is the [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr) tag which will break if necessary (Edit: I've just noticed that it doesn't work in IE, sigh!) — freefaller, Sep 29 '15 at 16:26
@freefaller `` has no IE support at all and would require it being inserted in the content. — j08691, Sep 29 '15 at 16:29
@j08691 yes, I've just discovered that, which means my use of it recently is now invalid, and I need to go and re-evaluate that code :-( In my defence, the OP does say *HTML... are all possibilities* — freefaller, Sep 29 '15 at 16:30
Ah, but according [to this answer](http://stackoverflow.com/a/23759279/930393) using `` will work, even on IE — freefaller, Sep 29 '15 at 16:37

Richard Hamilton · Accepted Answer · 2015-09-29T16:37:26.960

You could add an inline span tag on a character.

$("p").html($("p").text().replace('@', '<span class="after">@</span>'));

Fiddle: http://jsfiddle.net/21jqbtv9/5/

If you'd like what's before or after a particular character, you should use lookahead and lookbehinds respectively.

lookbehind: /(?<=@).+/

lookahead: /.+(?=@)/

Change the first argument of the replace() function to one of the above regex. Here is another example with a fiddle

$(document).ready(function() {
    var email = $("p").html();
    var emailParts = email.split('@');
    var beforeText = emailParts[0];
    var afterText = emailParts[2];
   $("p").html($("p").html().replace(beforeText, "<span class='after'>" + beforeText + "</span>"));
});

http://jsfiddle.net/jL5kL72q/

For the part after the @ symbol, just change beforeText to afterText.

score 2 · Answer 2 · edited May 23 '17 at 12:14

Another option is to use the HTML encoded 

According to this answer it will produce the same result as the <wbr> tag that I was going to suggest (until j08691 pointed out doesn't work in IE).

So you could have the email address as something like...

email&#x200b;@example.com

Here is an example of the character in action that you can run through the snippet...

<div>
quickbrownfoxjumpsoverthelazydogquickbrownfoxjumpsoverthelazydog&#x200b;quickbrownfoxjumpsoverthelazydogquickbrownfoxjumpsoverthelazydog
</div>

Can you wrap text on an @ symbol?

2 Answers2