如何防止電子郵件地址的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

@ 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

編輯：

雖然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自動連字號

回答

相關問題