Question

我希望能够在@符号后点击电子邮件。

所以它看起来像下面的

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

到目前为止我所拥有的是：

http://jsfiddle.net/9rjW3/

以下是相同的代码：

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>thisisatest@gmail.com</td>
        <td>Active</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Joshua Bourguignon</td>
        <td>tasdflknadsfl@gmail.com</td>
        <td>Inactive</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Ekkehard Mehmud</td>
        <td>asdflknasdc@yahoo.com</td>
        <td>Active</td>
    </tr>
</table>

是否可以使用@符号等自定义字符对字符串进行换行？

Answer 1

类似s.replace(/([^\n]{10})/g, '$1\n');的内容，其中{10}是您想要添加中断的字符数。

另外，为了使其看起来一致，最好使用等宽字符，否则角色的宽度会有很大差异。

Answer 2

使用jQuery试试这个：

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

DEMO FIDDLE

Answer 3

在每个“@”字符前插入<wbr>标记。这是一个非标准但广泛支持的可选换行标记。 allowing line breaks的问题很复杂，而且由于浏览器的变化，旧的<wbr>并不像过去那样明确。为了最大化赔率，您可以使用更复杂的添加方法

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

在每个“@”之前，使用CSS代码

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

添加了U + 200B，字符级可选换行符，被一些停止支持<wbr>的浏览器所尊重。

根据要求，您可以使用JavaScript（或特别是使用jQuery）以编程方式进行插入，或者（生成或以编程方式）在生成HTML文档时进行插入。

Answer 4

我有更多的帮助，我发现这是最好的方法

<强> 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;
});

信用证转到：David Thomas

指定字符的自定义换行符

4 个答案: