CODEWITHSUNDEEP
jqueryhtmlcss
Arian Faurtosh
Arian Faurtosh

Reputation: 18511

Custom line break on specified character

I want to be able to word break an email, after the @ sign.

So it would look like the following

 id | name    | email       | status
--------------------------------------
 1  | Bob joe | bjoe        | active
    |         | @gmail.com  | 
--------------------------------------
 2  | jay c   | [email protected]| active
--------------------------------------
 3  | David   | dsmith      | inactive
    | Smith   | @yahoo.com  | 
                  ^ I want it to break the email right before the @sign

What I have so far is this:

http://jsfiddle.net/9rjW3/

Here is the same code below:

CSS

table{ 
    table-layout:fixed;  

    -ms-word-break: break-all; 
    word-break: break-all; 
    word-break: break-word; 

    width: 330px;
}

table td{
    overflow: hidden;
}

HTML

<table class="fixed" border="1">
    <col width="20px" />
    <col />
    <col />
    <col width="70px" />
    <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>status</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Kaimana Marek</td>
        <td>[email protected]</td>
        <td>Active</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Joshua Bourguignon</td>
        <td>[email protected]</td>
        <td>Inactive</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Ekkehard Mehmud</td>
        <td>[email protected]</td>
        <td>Active</td>
    </tr>
</table>

Is it possible to line break a string with a custom character like the @ sign?

Upvotes: 0

Views: 1525

Answers (4)

Arian Faurtosh
Arian Faurtosh

Reputation: 18511

I had some more help, and I found out this was the best way to do it

http://jsfiddle.net/9rjW3/10/

$('tr + tr td:nth-child(3) span').html(function(i,h){
    return $(this).height() > 18 ? h.replace(/@/g, '\n@') : h;
});

Credit goes to: David Thomas

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

Insert a <wbr> tag before each “@” character. This is a nonstandard but widely supported tag for optional line break. The issue of allowing line breaks is complicated, and the good old <wbr> isn’t as clear-cut as it used to be, due to changes in browsers. To maximize the odds, you could use the more complicated approach of adding

<wbr><a class=wbr></a>

before each “@”, with the CSS code

.wbr:after { content: "\00200B"; }

which adds U+200B, the character-level optional line break, honored by some browsers that stopped supporting <wbr>.

Depending on the requirements, you can do the insertion programmatically with JavaScript (or specifically with jQuery), or (manually or programmatically) when generating the HTML document.

Upvotes: 0

monsur.hoq
monsur.hoq

Reputation: 1131

Try this using jQuery :

jQuery(document).ready(function(){
    $("td").each(function() {
        var text = $(this).text();
        text = text.replace("@", "<br/>@");
        $(this).html(text);
    });
});

DEMO FIDDLE

Upvotes: 0

AnuragBabaresco
AnuragBabaresco

Reputation: 604

Something like s.replace(/([^\n]{10})/g, '$1\n'); where {10} is the number of characters after which you want to add a break.

Also, to make it look consistent it would be best to use monospace characters, because otherwise the width of your characters varies significantly.

Upvotes: 1

Related Questions