하이픈 뒤에 줄 바꿈 없음
하이픈 사용 후 줄 바꿈을 방지하려고 합니다.-모든 브라우저와 호환되는 사례별 기반.
예:
다음과 같은 텍스트가 있습니다.3-3/8"과 같습니다: HTML 하 다 같 습 니 다 과 음 면 로 다 니 ▁which 같 습 ▁this ▁in3-3/8”
문제는 한 줄의 끝 근처에서 하이픈 때문에 전체 단어처럼 취급하지 않고 다음 줄로 끊어지고 감긴다는 것입니다.
3-
3/8"
는 "0 break character", "0 width no break character "0 width no break character"를 운이 없이도...
3-3/8”
사파리에서 보고 있는데 모든 브라우저에서 똑같을 것 같아요.
은 저의 다음나입니다.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" />
하이픈 사용 후 줄 바꿈을 방지할 수 있는 방법이 있습니까?모든 페이지에 적용되는 해결책은 필요 없습니다...필요에 따라 삽입할 수 있습니다. 예를 들어, "0 너비의 중단 없는 문자"와 같은 것입니다. 단, 작동하는 문자는 제외합니다.
여기 데모가 있습니다.하이픈에서 선이 끊어질 때까지 프레임을 좁히기만 하면 됩니다.
않는 .‑저는 대시를 당신의 jsfidle에 있는 그 문자로 바꾸고 프레임을 최대한 작게 줄였습니다. 그리고 더 이상 줄이 갈라지지 않습니다.
또한 관련 텍스트를 다음과 같이 묶을 수 있습니다.
<span style="white-space: nowrap;"></span>
IE8/9는 CanSpice의 답변에 언급된 깨지지 않는 하이픈을 일반 하이픈보다 길게 렌더링합니다.일반적인 하이픈 대신 end-dash의 길이입니다.이 디스플레이 차이는 저에게 거래를 깨는 것이었습니다.
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>
또한 "Word Joiner"를 U+2060삽입하여 "joiner way"를 수행할 수 있습니다.
허용되는 경우 유니코드 문자 자체를 HTML 출력에 직접 삽입할 수 있습니다.
그렇지 않으면 엔티티 인코딩을 사용하여 수행할 수 있습니다.예를 들어 텍스트를 결합합니다.red-brown사용:
red-⁠brown
또는 (대략 등가):
red-⁠brown
사용 가능한 또 다른 문자는 "영폭 공백 없음"[ 1 ]입니다.U+FEFF
red-brown
및 (대략 등가):
red-brown
: 이 방법은 Chrome과 같은 주요 브라우저에서 여전히 작동하지만 Unicode 3.2 이후에는 더 이상 사용되지 않습니다.
"접합자 방식"과 "U+2011깨지지 않는 하이픈"의 비교:
조인자라는 단어는 하이픈뿐만 아니라 다른 모든 문자에도 사용할 수 있습니다.
조인자라는 단어를 사용할 때 대부분의 렌더러는 텍스트를 동일하게 래스터화합니다.Chrome, FireFox, IE 및 Opera에서 일반 하이픈 렌더링(예:
a-b-c-d-e-f-g-h-j-k-l-m-n-o-p-q-r-s-t-u-v-w-x-y-z
일반 하이픈(U+2060 Word Joiner 사용)의 렌더링과 동일합니다. 예:
a-b-c-d-e-f-g-hi-j-k-l-n-op-q-r-s-u-w-x-y-z
위의 두 렌더링은 "비브레이킹 하이픈"의 렌더링과는 다르지만, 예를 들어 다음과 같습니다.
a-b-c-d-e-f-h-i-j-k-m-n-p-q-r-t-u-v-x-z
(차이의 범위는 브라우저와 글꼴에 따라 다릅니다.예: "의 글꼴 선언을 사용하는 경우
arial파이어폭스와 IE11은 상대적으로 큰 차이를 보이는 반면 크롬과 오페라는 작은 차이를 보입니다.)
"접합자 방식"과의 비교<span class=c1></span>(CSS).c1 {white-space:nowrap;}) 및<nobr></nobr>:
조인자라는 단어는 HTML 태그의 사용이 제한되는 상황(예: 웹 사이트 및 포럼 형식)에 사용할 수 있습니다.
프레젠테이션과 콘텐츠의 스펙트럼에서 대다수는 태그와 비교할 때 조인어라는 단어가 콘텐츠에 더 가깝다고 생각합니다.
윈도우즈 8.1 Core 64비트에서 다음을 사용하여 테스트:
IE 11.0.9600.18205
파이어폭스 43.0.4
크롬 48.0.2564.109(공식 빌드) m(32비트)
오페라 35.0.2066.92
파티에 늦었지만, 사실 이것이 가장 우아하다고 생각합니다.WORD JOINER Unicode 문자 ⁠를 하이픈, emdash 또는 임의의 문자 양쪽에 사용합니다.
그래서, 이렇게:
⁠—⁠
이렇게 하면 양쪽 끝에 있는 기호가 이웃에 결합되어(공백을 추가하지 않고) 줄 바꿈을 방지할 수 있습니다.
@den의 유용한 JSX 솔루션에 이어서, 이것은 저에게 효과가 있었습니다.
<h2>{props.name.replace('-', '-\u2060')}</h2>
유니코드 문자를 사용한 JSX 솔루션 예제:
<div>{`This is JSX-${'\u2060'}related example`}</div>
언급URL : https://stackoverflow.com/questions/7691569/no-line-break-after-a-hyphen
'programing' 카테고리의 다른 글
| 최대 절전 모드, ID, 오라클, 시퀀스 (0) | 2023.08.10 |
|---|---|
| 스키마 유효성 검사로 인해 스프링 부트 프로젝트가 실행되지 못함: 시퀀스 누락 [hibernate_sequence] (0) | 2023.08.10 |
| JQuery를 사용하여 입력 필드에 포커스를 설정하는 방법 (0) | 2023.08.10 |
| 도커 파일에서 도커 이미지로 폴더를 복사하는 방법은 무엇입니까? (0) | 2023.08.05 |
| 명령행별 pytest에서 인수를 전달하는 방법 (0) | 2023.08.05 |