Как предотвратить автоматическую перенос css для адресов электронной почты

Я использую перенос CSS (hyphens:auto;) для текстовых абзацев на веб-сайтах. Иногда бывает, что адреса электронной почты переносятся через запятую, что приводит к «неправильному» доменному имени. Пример:Как предотвратить автоматическую перенос css для адресов электронной почты

[email protected]

становится

[email protected] 
team.abc

Как бы я предотвратить такое поведение? Поскольку это созданный пользователем контент, невозможно вручную добавить элементы html. Я думал о разборе текстов с помощью javascript, добавлении специальных тегов к адресам электронной почты и использовании hyphens:none; для этих тегов. Но я беспокоюсь о производительности.

(я думаю, что это проблема, особенно с немецким текстом, где есть много сложных существительных)

источник

2013-12-12 Christoph

вы можете использовать JavaScript, чтобы найти адрес электронной почты, а затем обернуть поверочного тег вокруг него, который имеет класс не-дефис – Pete

на первый взгляд, лучший общий ПОДХОД заключается в том, чтобы добавить элементы html на сервер и отключить дефисы для этих элементов. http://meyerweb.com/eric/thoughts/2012/12/17/where-to-avoid-css-hyphenation/ – roo2

Вместо этого вы можете обосновать текст рассогласовывать его, эффективно устраняя проблему. – Alex

Там нет пути в CSS для обозначения частей текста, не делая их элементами (если не они можно назвать псевдоэлементами, такими как :first-letter, но в настоящее время в CSS есть только несколько псевдоэлементов, и они здесь не помогают).

Таким образом, вам необходимо обрабатывать контент программно, как на стороне сервера, так и на стороне клиента. Признание адресов электронной почты является нетривиальным, и вы можете рассмотреть возможность обработки некоторых других конструкций (например, URL-адресов). По соображениям производительности вы можете сделать это на клиентском JavaScript, чтобы обработка начиналась только после загрузки документа. В качестве альтернативы, если данные сохраняются на сервере в формате HTML, вы можете выполнить обработку перед сохранением данных (хотя это увеличивает объем данных, отправляемых в браузеры).

источник

2013-12-12 11:03:47

Очень хороший ответ. Вместо этого я бы закончил: «По соображениям производительности вы можете подумать об этом или на клиентском JavaScript, чтобы обработка начиналась только после загрузки документа или только один раз на стороне сервера при сохранении данных». – ANeves

@ Аневес, хороший момент, я обновил ответ соответственно. –

Спасибо, я думаю, что я иду на серверное решение. Поскольку большинство веб-сайтов, которые я строю, основаны на WordPress, я попрошу конкретное решение в «WordPress Answers».Существуют некоторые плагины/функции, которые фильтруют выходные данные и обфускают адреса электронной почты. Это должно быть легко немного изменить. – Christoph

Да, если он сгенерирован пользователем, возможно, проще всего обработать его с помощью регулярного выражения, более того, клиент или серверная сторона зависит от вас, это простая реализация в javascript.

var unprocessed = $('#user-output').html(); 
processed = unprocessed.replace(/([a-z]+\[[email protected]\][a-z]+\.[a-z]+)/g,'<span class="email">$1</span>'); 
$('#user-output').html(processed);

jquery wrap a e-mail address

EDIT:

хотя this regex may not pick up ALL email addresses

и это нарушит электронной связи, например, <a href="mailto:[email protected]">

источник

2013-12-12 11:14:27 roo2

Обратите внимание, что в некоторых случаях это может сломать HTML. Попробуйте применить его здесь: '

If you have questions, please email me . :)

'. – ANeves

Хорошая точка, мы предполагаем, что здесь весь текст, поэтому я разбираю только пользовательский вывод, а не всю страницу .. все еще может пойти не так, как надо – roo2

Все будет намного проще, если у вас есть адреса электронной почты, завернутые в теги. Я использую плагин wordpress, который обнаруживает адреса электронной почты и преобразует их в защищенные от спама ссылки электронной почты. После этого можно легко добавить это в CSS:

a[href^="mailto:"] { 
    -webkit-hyphens: none; 
    -moz-hyphens: none; 
    hyphens: none; 
}

источник

2014-01-09 09:07:09 Lariza

Как предотвратить автоматическую перенос css для адресов электронной почты

ответ

Смежные вопросы