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

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

---

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;
}

---

이 CSS를 사용해보십시오 :

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

참고 URL : https://stackoverflow.com/questions/8753296/how-to-prevent-line-break-at-hyphens-on-all-browsers