문제
상대적으로 간단한 CSS를 고려하면 다음과 같습니다.
div {
width: 150px;
}
<div>
12333-2333-233-23339392-332332323
</div>
문자열이 계속 고정되도록 하려면 어떻게 해야 합니까? width
~의 150, 그리고 단순히 하이픈의 개행으로 줄 바꿈합니까?
해결책
하이픈을 다음으로 바꾸세요.
­
이를 "부드러운" 하이픈이라고 합니다.
div {
width: 150px;
}
<div>
12333­2333­233­23339392­332332323
</div>
다른 팁
모든 최신 브라우저에서* (그리고 일부에서는 오래된 브라우저, 역시), <wbr>
요소 특정 지점에서 긴 단어를 깰 수 있는 기회를 제공하는 완벽한 도구입니다.
해당 링크를 인용하려면:
단어 브레이크 기회(
<wbr>
) HTML 요소는 브라우저가 선택적으로 줄을 끊을 수 있는 텍스트 내 위치를 나타냅니다. 단, 줄 바꿈 규칙이 해당 위치에서 줄 바꿈을 생성하지는 않습니다.
OP의 예에서 이를 사용하는 방법은 다음과 같습니다(또는 다음에서 실제로 작동하는 모습을 확인하세요). JSFiddle):
<div style="width: 150px;">
12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>
*IE9, IE10 및 최신 버전의 Chrome, Firefox, Opera, Safari에서 테스트했습니다.
div {
width: 150px;
}
<div>
12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>
CSS3의 일부로 아직 완전히 지원되지는 않습니다. 하지만 여기에서 단어 줄 바꿈에 대한 정보를 찾을 수 있습니다..또 다른 옵션은 wbr 태그, 및 어느 것도 완벽하게 지원되지 않습니다.
귀하의 예제는 Google Chrome, Safari(Windows) 및 IE8에서 예상대로 작동합니다.Firefox 3 및 Opera 9.5에서는 텍스트가 150px 상자에서 벗어납니다.
추가적으로 ­
귀하의 예에서는 다음 중 하나가 작동하지 않습니다.
단어 분리 시 작동하지만 단어 분리가 아닌 경우 하이픈을 표시하지 않습니다.
단어를 깨뜨리지 않으면 작동하지만 휴식 시간에 하이픈을 추가하기 때문에 단어를 깨뜨릴 때 두 개의 하이픈을 표시하십시오.
이 특정 인스턴스(문자열에 하이픈이 포함되는 경우)에서는 텍스트를 다음 서버측으로 변환합니다.
<div style="width:150px;">
<span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>
정확히 보고 싶은 내용에 따라 다음의 조합을 사용할 수 있습니다. hyphen
, soft hyphen
, 및/또는 zero width space
.
소프트 하이픈에서는 브라우저가 단어 분리(하이픈 추가)를 수행할 수 있습니다.너비가 0인 공간에서 브라우저는 (아무것도 추가하지 않고) 단어 분리를 할 수 있습니다.
따라서 코드가 다음과 같은 경우:
111111­222222­-333333​444444-​555555
그러면 브라우저에 단어 구분 없이 다음이 표시됩니다.
1111112222222-33333334444444-5555555
가능한 모든 단어 분리가 이루어집니다.
111111-
222222-
-333333
444444-
555555
필요한 옵션을 선택하기만 하면 됩니다.귀하의 경우에는 4초에서 5초 사이일 수 있습니다.
다음을 사용할 수도 있습니다.
word-break:break-all;
전.
<div style='width:10px'>ababababababbabaabababababababbabababa</div>
산출:
abababababa
ababababbba
abbabbababa
ababb
word-break는 제공된 너비나 높이에 맞지 않는 문장에 공백이 없더라도 모든 단어나 줄을 끊는 것입니다.이를 위해서는 너비나 높이를 제공해야 합니다.
잘림 방지 하이픈이 잘 작동합니다.
HTML 엔터티(십진수)
‑
대신에 -
당신이 사용할 수있는 ‐
또는 \u2010
.
또한, 하이픈 CSS 속성은 ~ 아니다 로 설정 없음 (기본값은 수동).
<wbr>
에서는 지원되지 않습니다 인터넷 익스플로러.
이것이 도움이 되기를 바랍니다
사용 <br>
(break) 줄을 끊고 싶은 곳에 태그를 붙입니다.
하이픈 문자 뒤에 너비가 0인 공백을 사용할 수 있습니다.
div {
width: 150px;
}
<div>
12333-​2333-​233-​23339392-​332332323
</div>
하이픈을 사용하기 전에 줄바꿈을 원하는 경우 ​-
대신에.