如何通过“@”或“.”等特定字符将电子邮件地址文本拆分为 table 单元格？

Question

我有一个table。此 table 的一列是电子邮件地址。电子邮件是一个没有 spaces.

的字符串

当没有足够的内容时 space 我需要根据“@”和“.”的功能将此文本分成多行字符。

给定以下电子邮件字符串：

john@email.com
richard.developer@email.com

这是我所期望的：

john@email.com
richard
.developer
@email.com

这是我没想到的：

john@email.com
richard.
developer
@email.com

如何使用 CSS 和 HTML 实现此目的？

Answer 1

我可以建议你实现其他效果吗？当文本比容器长时有三个点？

td span{
  display:block;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

<table>
  <tr>
    <td><span>very.long.email@google.com</span></td>
  </tr>
</table>

Answer 2

已解决！

两种方法：

方法一（IE 无效）

<td>
      richard<wbr>.<wbr>developer<wbr>@<wbr>gmail<wbr>.<wbr>com
</td>

感谢n_ermosh： Specifying a preferred line break point in HTML text in a responsive design

方法二

CSS:

.break {
    display: inline-block;
}

HTML:

<td>
   <span class="break">richard</span>
   <span class="break">.</span>
   <span class="break">developer</span>
   <span class="break">@</span>
   <span class="break">developer</span>
   <span class="break">.</span>
   <span class="break">com</span>
</td>

感谢 jomo： Specifying a preferred line break point in HTML text in a responsive design

如何通过“@”或“.”等特定字符将电子邮件地址文本拆分为 table 单元格？

How to break email address text into a table cell by specific charactes like '@' or '.'?

html

css

line-breaks

tabular