모든 브라우저에서 하이픈에서 줄 바꿈을 방지하는 방법

CMS에 ckeditor가 있습니다. 최종 사용자는 해당 ckeditor를 통해 긴 기사를 입력합니다. 해당 기사의 하이픈에서 줄 바꿈을 방지하는 방법이 필요합니다.

어쨌든 모든 브라우저에서 하이픈에서 줄 바꿈을 방지 할 수 있습니까?

또는 ckeditor에이를 방지 할 수있는 옵션이 있습니까?

텍스트를 "단어"(공백으로 구분 된 비 공백 문자의 시퀀스)로 분할하고 nobr마크 업 내부에 하이픈이 포함 된 각 "단어"를 래핑하는 것보다 안정적으로 수행하는 더 간단한 방법은 없습니다 . 따라서 입력 데이터 bla bla foo-bar bla bla는 bla bla <nobr>foo-bar</nobr> bla bla.

nobr"단어"에 문자와 숫자 만 포함되어있을 때마다 마크 업 삽입을 고려할 수도 있습니다 . 그 이유는 일부 브라우저가“2/3”또는“f (0)”과 같은 문자열을 깨뜨릴 수도 있기 때문입니다 ( 브라우저에서 줄 바꿈의 이상한 점에 대해서는 내 페이지 참조 ).

‑Unicode NON-BreakING HYPHEN (U + 2011)을 사용할 수 있습니다 .

HTML : ‑또는‑

참조 : http://en.wikipedia.org/wiki/Hyphen#In_computing

한 가지 해결책은 추가 span태그와 white-spaceCSS 속성 을 사용하는 것 입니다. 다음과 같이 클래스를 정의하십시오.

.nowrap {
    white-space: nowrap;
}

그런 다음 하이픈으로 연결된 텍스트 주위에 해당 클래스와 함께 범위를 추가합니다.

<p>This is the <span class="nowrap">anti-inflammable</span> model</p>

이 접근 방식은 모든 브라우저에서 잘 작동합니다. 여기에 나열된 버그가있는 구현은 white-space속성의 다른 값에 대한 것입니다 . http://reference.sitepoint.com/css/white-space#compatibilitysection

모든 HTML 인스턴스를 편집하지 않고는 할 수 없습니다. 결과적으로 나는 그들을 대체하기 위해 몇 가지 JS를 작성했습니다.

jQuery :

//replace hypens with no-breaking ones
$txt = $("#block-views-video-block h2");
$txt.text( $txt.text().replace(/-/g, '‑') );

바닐라 JS :

function nonBrHypens(id) {
    var str = document.getElementById(id).innerHTML; 
    var txt = str.replace(/-/g, '‑');
    document.getElementById(id).innerHTML = txt;
}

하이픈 주위에 결합 자 문자 ( ⁠) 라는 단어를 사용합니다 . IE에서도 작동합니다.

https://en.wikipedia.org/wiki/Word_joiner

특정 하이픈 수정 ...

function fixicecream(text) {
    return text.replace(/ice-cream/g,'ice⁠-⁠cream'));
}

또는 모든 것 ...

function fixhyphens(text) {
    return text.replace(/(\S+)-(\S+)/g,'$1⁠-⁠$2'));
}

이 CSS를 사용해보십시오 :

word-break: break-all; 
-webkit-hyphens:none;
-moz-hyphens: none; 
hyphens: none;