2017-01-27 10 views
-1

У меня есть стол. Один столбец этой таблицы - адрес электронной почты. Электронная почта - это строка без пробелов.Как разбить текст адреса электронной почты на ячейку таблицы с помощью определенных характеристик, таких как «@» или «.»?

Когда мне не хватает места, мне нужно разбить этот текст на несколько строк в функции «@» и «.». charactes.

Учитывая следующие строки электронной почты:

[email protected] 
[email protected] 

Это то, что я ожидал:

[email protected] 
richard 
.developer 
@email.com 

Это то, что я не ожидал:

[email protected] 
richard. 
developer 
@email.com 

Как я могу добиться этого с помощью CSS и HTML?

ответ

0

Решено!

два метода:

Метод 1 (не работает в 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

Метод 2

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> 

Благодаря йомо в: Specifying a preferred line break point in HTML text in a responsive design

1

Могу ли я предложить вам другой эффект? Есть три точки, когда текст длиннее контейнера?

td span{ 
 
    display:block; 
 
    width: 100px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}
<table> 
 
    <tr> 
 
    <td><span>[email protected]</span></td> 
 
    </tr> 
 
</table> 
 

+0

Спасибо за ответ. Это не совсем то, что мне нужно в этом случае, хотя это было бы полезно для меня в другой ситуации. К сожалению, он не работает. Также это ситуация, когда размер столбца не определен. Только два других столбца имеют определенный размер. – Natanael