전자 메일 주소에 대한 CSS 자동 하이픈 넣기를 방지하는 방법

Question

웹 사이트의 텍스트 단락에 CSS 하이픈 (hyphens:auto;)을 사용합니다. 때로는 전자 메일 주소가 하이픈으로 연결되어 '잘못된'도메인 이름이 발생하는 경우가 있습니다. 예 :

john.doe@planungsteam.abc

내가 그 동작을 방지 할 방법

john.doe@planungs- 
team.abc 

이됩니까? 이것은 사용자가 생성 한 컨텐트이므로 html 요소를 수동으로 추가 할 수있는 방법은 없습니다. 나는 자바 스크립트로 텍스트를 파싱하고 이메일 주소에 특수 태그를 추가하고 해당 태그에 hyphens:none;을 사용하려고 생각하고있었습니다. 하지만 성능이 걱정됩니다.

(그들에게 요소를하지 않고 텍스트의 일부를 참조하는 CSS의 방법은 없습니다

Answer 1

(I이 특히 복합 명사들이 많이있다 독일어 텍스트의 문제라고 생각합니다) 그들이하지 않는 한 :first-letter과 같은 의사 요소라고 할 수 있지만 현재 CSS에는 몇 가지 의사 요소가 있지만 여기서는 도움이되지 않습니다.

따라서 서버 측 또는 클라이언트 측에서 프로그래밍 방식으로 콘텐츠를 처리해야합니다. 전자 메일 주소를 인식하는 것은 중요하지 않으며 일부 다른 구문 (예 : URL)도 처리하는 것이 좋습니다. 성능상의 이유로 클라이언트 측 JavaScript에서이 작업을 수행하여 문서가로드 된 후에 만 ​​처리가 시작되도록 할 수 있습니다. 또는 HTML 형식으로 서버에 데이터를 저장하면 데이터를 저장하기 전에 처리를 수행 할 수 있습니다 (브라우저에 보낼 데이터의 양이 늘어납니다).

Answer 2

예, 사용자가 생성 한 경우 정규식으로 처리하는 것이 가장 쉽습니다. 클라이언트 또는 서버 측은 여러분에게 달려 있습니다. 자바 스크립트에서 간단한 구현을 heres합니다.

var unprocessed = $('#user-output').html(); 
processed = unprocessed.replace(/([a-z]+\[-@-\][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:support@example.com">

Answer 3

태그에 이메일 주소가있는 경우 상황이 훨씬 쉬워집니다. 전자 메일 주소를 탐지하고 스팸으로 보호 된 전자 메일 링크로 변환하는 플러그인을 사용하고 있습니다. 그 후는 CSS에서이 문제를 쉽게 추가 할 수 있습니다 :

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