하이픈 후 줄 바꿈 없음

340

-모든 브라우저와 호환되는 경우에 따라 하이픈 뒤에 줄 바꿈을 방지하려고 합니다.

예:

나는이 텍스트를 가지고있다 : 3-3/8"HTML에서 이것은 : 3-3/8”

문제는 하이픈으로 인해 줄 끝 근처에서 전체 단어처럼 취급하지 않고 다음 줄로 줄 바꿈한다는 것입니다.

3-
3/8"

나는 "제로 폭 없음 구분 문자"를 삽입하려고 노력했지만 운이 없다 ...

3-&#65279;3/8&rdquo;

Safari에서 이것을보고 모든 브라우저에서 동일하다고 생각합니다.

다음은 내 doctype문자 인코딩입니다 ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

하이픈 다음에 줄 바꿈을 방지 할 수있는 방법이 있습니까? 전체 페이지에 적용 할 수있는 솔루션이 필요하지 않습니다. "제로 너비없는 구분 문자 없음"과 같이 필요에 따라 삽입 할 수있는 항목 만 있으면됩니다.

여기 데모가 있습니다. 하이픈에서 줄이 끊어 질 때까지 프레임을 더 좁히십시오.

http://jsfiddle.net/RagKH/

— 스파키
소스

@EricLeschinski, 그것은 이미 답변으로 게시되었습니다 : stackoverflow.com/a/12362315/594235

— Sparky

charset = utf-8을 사용하면 중단되지 않는 하이픈을 넣을 수 있습니다

— QuentinUK

@QuentinUK, 맞아 ... 이것은 이미 받아 들여지지 않은 대답입니까? ‑끊이지 않는 하이픈입니다.

— Sparky

& # 8209; 일반 ASCII이므로 utf-8은 필요하지 않습니다. 페이지의 utf-8 인코딩을 사용하면 실제 문자를 넣을 수 있습니다. -는 같지만 문자와 동일하지 않습니다.

— QuentinUK

귀하가 작성한 것에 대한 올바른 HTML은 3-3/8″또는 3-3/8″입니다. 따옴표는 소수가 아닙니다. 순수한 ASCII로 원한다면 대신 큰 따옴표를 사용하십시오 ( "). 가독성이 좋은 텍스트로 33/8</style>″표시되는 경우 대신 '3⅜ ″'을 표시하는 대신을 사용 하는 것이 좋습니다.

— Canned Man

579

끊이지 않는 하이픈을 사용해보십시오 ‑. jsfiddle에서 대시를 해당 문자로 바꾸고 프레임을 가능한 한 작게 줄이면 줄이 더 이상 분할되지 않습니다.

— 캔 스파이크
소스

10

나는 그것이 비파괴 공간과 같은 것이라고 생각했기 때문에 방금 '비파 선 대시'를 검색 하고 여기에 끝났습니다 . :-)

— CanSpice

아아 ... 난 "깨기 문자 없음" 검색을하고 그 벽에 부딪쳤다 . 깨지지 않는 독립형 하이픈 문자가 있다는 것은 나에게 결코 발생하지 않았습니다.

— Sparky

6

IE8 / 9에서이 문자는 일반적인 하이픈보다 길게 렌더링됩니다. 그것은 대쉬와 같은 크기 인 것 같습니다.

— mrtsherman

21

결과가 일반 하이픈과 다를 수있는 이유는 많은 글꼴에 끊지 않는 하이픈이 포함되어 있지 않기 때문입니다. 이렇게하면 브라우저에서 다른 글꼴을 사용해야하며, 끊지 않는 하이픈은 해당 글꼴의 일반 하이픈과 동일하게 보이지만 다른 글꼴의 일반 하이픈과 일치한다는 보장은 없습니다.

— Jukka K. Korpela

5

Deb의 답변이 최고라고 생각합니다.

— Ray Cheng

257

관련 텍스트를

<span style="white-space: nowrap;"></span>

— 뎁
소스

17

예, 이것은 받아 들여진 것보다 더 나은 대답입니다. 감사합니다 @Deb.

— CMH

38

@CMH 공백을 감싸고 싶을 때는 도움이되지 않지만 (사용자가 공백을 볼 수있는 빈 곳-아무것도 아님), 단어 "이메일"과 같이 하이픈으로 단어를 나누고 싶지는 않습니다. 허용되는 답변이 경우에 도움이됩니다

— xmojmr

12

이 경우 "전자 메일"주위에서만 span을 사용할 수 있습니다.

— guirto

3

@ CMH, 이것은 또한 좋은 대답입니다. 그래서 나는 투표했습니다. 그러나 다음 줄로 자동 분리되지 않는 문자를 요청했기 때문에이 답변을 수락하지 않기로 선택했습니다. 특정 브라우저에서 "중단 하이픈"( ‑) 이 일반 하이픈보다 약간 더 길어질 수 있다는 사실은 나에게 사소한 일이었습니다.

— Sparky

11

@Sparky 다른 문자를 사용하는 데있어 한 가지 문제점은 검색 결과가 엉망이된다는 것입니다. 페이지에서 "3-3 / 8"를 찾으려고하면 끊기지 않는 하이픈을 찾을 수 없습니다.

— Mr Lister

23

IE8 / 9는 CanSpice의 답변에 언급 된 끊임없는 하이픈을 일반적인 하이픈보다 길게 렌더링합니다. 일반적인 하이픈 대신 엔 대시 길이입니다. 이 디스플레이 차이는 나를위한 거래 차단기였습니다.

Deb에서 지정한 CSS 응답을 사용할 수 없으므로 대신 중단 태그를 사용하지 않았습니다.

<nobr>e-mail</nobr>

또한 IE8 / 9가 하이픈에서 깨지는 특정 시나리오를 발견했습니다.

문자열에는 공백이 아닌 단어로 구분 된 단어가 포함됩니다.  
폭이 제한되어 있습니다
대시를 포함

IE는 이것을 이렇게 렌더링합니다.

IE8 / 9에서 하이픈 끊기의 예

다음 코드는 위의 문제를 재현합니다. IE10이 문제를 해결함에 따라 메타 태그를 사용하여 IE9로 렌더링을 강제 실행해야했습니다. 메타 태그를 지원하지 않기 때문에 바이올린이 없습니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <meta charset="utf-8"/>
        <style>
            body { padding: 20px; }
            div { width: 300px; border: 1px solid gray; }
        </style>
    </head>
    <body>
        <div>      
            <p>If&nbsp;there&nbsp;is&nbsp;a&nbsp;-&nbsp;and&nbsp;words&nbsp;are&nbsp;separated&nbsp;by&nbsp;the&nbsp;whitespace&nbsp;code&nbsp;&amp;nbsp;&nbsp;then&nbsp;IE&nbsp;will&nbsp;wrap&nbsp;on&nbsp;the&nbsp;dash.</p>
        </div>
    </body>
</html>

— mrtsherman
소스

6

사용 nobr은 가장 크로스 브라우저 방식이며 글꼴 및 CSS와 독립적으로 작동합니다. 이 nobr요소는 HTML 사양에 정의되어 있지 않지만 형식으로 만 간주해야합니다. 그러나 HTML 사양으로 작성 해야하는 경우 CSS를 사용하는 Deb의 답변이 가장 좋습니다.

— Jukka K. Korpela

5

CSS 솔루션을 사용할 수없는 이유가 궁금합니다.

— Ryan Ahearn 1

2

@RyanAhearn-HTML을 많이 제어하지 않는 타사 도구를 사용하고 있습니다. 인라인 태그 선언은 지원하지 않습니다.

— mrtsherman

''대신 클래스와 함께 스팬을 사용하고 CSS를 사용하여 스팬을 제어 할 수 없었습니까?

— StephenESC

1

점을 유의 nobr태그가 아닌 표준이며 언제든지 중단 할 수 있습니다. MDN 설명서에서는이 태그를 사용하지 않는 것이 좋습니다. developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

— Philipp

16

" U+2060Word Joiner "를 삽입하여 "결합 자 방식"으로 수행 할 수도 있습니다 .

Accept-Charset허용되는 경우 유니 코드 문자 자체를 HTML 출력에 직접 삽입 할 수 있습니다 .

그렇지 않으면 엔터티 인코딩을 사용하여 수행 할 수 있습니다. 예를 들어 텍스트를 결합 red-brown하려면 다음을 사용하십시오.

red-&#x2060;brown

또는 (소수점) :

red-&#8288;brown

. 사용 가능한 다른 문자는 " U+FEFFZero Width No-break Space " ^{^{[⁠ ⁠1]입니다}} .

red-&#xfeff;brown

그리고 (소수점) :

red-&#65279;brown

^{[1] :이 방법 은 Chrome과 같은 주요 브라우저에서 계속 작동 하지만 유니 코드 3.2부터 사용되지 않습니다 .}

" U+2011Non-breaking Hyphen " 과 "결합 자 방식"비교 :

단어 결합자는 하이픈뿐만 아니라 다른 모든 문자에도 사용할 수 있습니다.
단어 결합자를 사용할 때 대부분의 렌더러는 텍스트를 동일 하게 래스터 화합니다 . Chrome, FireFox, IE 및 Opera에서 일반적인 하이픈 렌더링은 다음과 같습니다.

abcdefghijklmnopqrstu-vwxyz

일반 하이픈 (U + 2060 Word Joiner 사용)의 렌더링과 동일합니다. 예 :

a-⁠b-⁠c-⁠d-⁠e-⁠f-⁠g-⁠h-⁠i-⁠j-⁠k-⁠l-⁠m-⁠n-⁠o-⁠p-⁠q- ⁠r-⁠s-⁠t-⁠u-⁠v-⁠w-⁠x-⁠y-⁠z

위의 두 렌더링은 " Non-breaking Hyphen " 의 렌더링과 다릅니다 . 예 :

a‑b‑c‑d‑e‑f‑g‑h‑i‑j‑k‑l‑m‑n‑p‑q‑r‑s‑t‑u‑v‑w‑x‑y‑ 지

. (차이의 정도는 브라우저 및 글꼴에 따라 다릅니다. 예를 들어 " arial" 의 글꼴 선언을 사용하는 경우 Firefox 및 IE11은 비교적 큰 변형을 표시하고 Chrome 및 Opera는 작은 변형을 표시합니다.)

(CSS .c1 {white-space:nowrap;})와 "결합 자 방식"의 비교 :

단어 결합자는 HTML 태그 사용이 제한된 상황 (예 : 웹 사이트 및 포럼 형식)에 사용할 수 있습니다.
프리젠 테이션 및 컨텐츠 의 스펙트럼 에서 대다수는 태그와 비교할 때 단어 결합자가 컨텐츠에 더 가까운 것으로 간주합니다.

^{• 다음을 사용하여 Windows 8.1 Core 64 비트에서 테스트
    한대로 :
• IE 11.0.9600.18205

    • Firefox 43.0.4

    • Chrome 48.0.2564.109 (공식 빌드) m (32 비트)

    • Opera 35.0.2066.92}

— 페이 서 리어
소스

IE11에서 "U + FEFF Zero Width No-break Space"가 제대로 작동하지 않는 것 같습니다.

— Ivan Gusev

그것은하지는 경우 작업을 수행 "U + 2060"보인다 "-"일부 유니 코드 문자 뒤에 :이 같은bingo-⁠bongo

— 이반 구 세프

상수의 부정적인 보도에도 불구하고

— 제임스 윌슨

6

파티에 늦었지만 이것이 실제로 가장 우아하다고 생각합니다. WORD JOINER 유니 코드 문자 & # 8288 ; 하이픈 또는 엠 대시 또는 문자 중 하나에

따라서 다음과 같이하십시오.

&#8288;—&#8288;

이것은 공백을 추가하지 않고 양쪽 끝의 심볼을 이웃에 연결하고 줄 바꿈을 방지합니다.

— 에크 슈타인
소스

Windows 10에서 어떤 이유로 ALT + 0173 (소프트 하이픈)을 사용하여이 작업을 수행 할 수있었습니다.

— pspahn