worldofjr worldofjr - 5 months ago 19
HTML Question

Can you wrap text on an @ symbol?

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!

Answer

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.

Comments