하이픈 뒤에 줄 바꿈 없음
-모든 브라우저와 호환되는 경우에 따라 하이픈 뒤에 줄 바꿈을 방지하려고 합니다.
예:
나는이 텍스트를 가지고있다 : 3-3/8"HTML에서 이것은 :3-3/8”
문제는 하이픈으로 인해 줄 끝 근처에서 전체 단어처럼 취급하지 않고 다음 줄로 줄 바꿈한다는 것입니다.
3-
3/8"
나는 "제로 폭 없음 구분 문자"를 삽입하려고 노력했지만 운이 없다 ...
3-3/8”
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" />
하이픈 다음에 줄 바꿈을 방지 할 수있는 방법이 있습니까? 전체 페이지에 적용 할 수있는 솔루션이 필요하지 않습니다. "제로 너비없는 구분 문자 없음"과 같이 필요에 따라 삽입 할 수있는 항목 만 있으면됩니다.
여기 데모가 있습니다. 하이픈에서 줄이 끊어 질 때까지 프레임을 더 좁히십시오.
끊이지 않는 하이픈을 사용해보십시오 ‑. jsfiddle에서 대시를 해당 문자로 바꾸고 프레임을 가능한 한 작게 줄이면 줄이 더 이상 분할되지 않습니다.
관련 텍스트를
<span style="white-space: nowrap;"></span>
IE8 / 9는 CanSpice의 답변에 언급 된 끊임없는 하이픈을 일반적인 하이픈보다 길게 렌더링합니다. 일반적인 하이픈 대신 엔 대시의 길이입니다. 이 디스플레이 차이는 나를위한 거래 차단기였습니다.
Deb에서 지정한 CSS 응답을 사용할 수 없으므로 대신 중단 태그를 사용하지 않았습니다.
<nobr>e-mail</nobr>
또한 IE8 / 9가 하이픈에서 깨지는 특정 시나리오를 발견했습니다.
- 문자열은 공백이 아닌 단어로 구분 된 단어를 포함합니다
- 폭이 제한되어 있습니다
- 대시를 포함
IE는 이것을 이렇게 렌더링합니다.
다음 코드는 위의 문제를 재현합니다. 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 there is a - and words are separated by the whitespace code &nbsp; then IE will wrap on the dash.</p>
</div>
</body>
</html>
" U+2060Word Joiner "를 삽입하여 "결합 자 방식"으로 수행 할 수도 있습니다 .
Accept-Charset허용되는 경우 유니 코드 문자 자체를 HTML 출력에 직접 삽입 할 수 있습니다 .
그렇지 않으면 엔터티 인코딩을 사용하여 수행 할 수 있습니다. 예를 들어, 텍스트에 참여 red-brown하려면 다음을 사용하십시오.
red-⁠brown
또는 (소수점) :
red-⁠brown
. 사용 가능한 또 다른 문자는 " U+FEFFZero Width No-break Space " [ 1]입니다 .
red-brown
그리고 (소수점) :
red-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는 작은 변형을 나타냅니다.)
와 "는 소목 방법"의 비교 <span class=c1></span>(CSS .c1 {white-space:nowrap;})과 <nobr></nobr>:
단어 결합자는 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
파티에 늦었지만 이것이 실제로 가장 우아하다고 생각합니다. WORD JOINER 유니 코드 문자 & # 8288 ; 하이픈 또는 엠 대시 또는 문자 중 하나에
따라서 다음과 같이하십시오.
⁠—⁠
이것은 공백을 추가하지 않고 양쪽 끝의 심볼을 이웃에 연결하고 줄 바꿈을 방지합니다.
참고 URL : https://stackoverflow.com/questions/7691569/no-line-break-after-a-hyphen
'IT' 카테고리의 다른 글
| 중첩 된 ng-repeat 내에서 2 개의 $ index 값 전달 (0) | 2020.03.08 |
|---|---|
| 소스 코드의 res / values / dimension.xml에서 차원 값로드 (0) | 2020.03.08 |
| 짧은 Git 버전 해시 받기 (0) | 2020.03.08 |
| Int를 Java로 열거 (0) | 2020.03.08 |
| Xcode 6 이상에서 카테고리를 작성하는 방법 (0) | 2020.03.08 |