대시에서 단어를 분리하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/904

  •  08-06-2019
  •  | 
  •  

문제

상대적으로 간단한 CSS를 고려하면 다음과 같습니다.

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>

문자열이 계속 고정되도록 하려면 어떻게 해야 합니까? width ~의 150, 그리고 단순히 하이픈의 개행으로 줄 바꿈합니까?

도움이 되었습니까?

해결책

하이픈을 다음으로 바꾸세요.

&shy;

이를 "부드러운" 하이픈이라고 합니다.

div {
  width: 150px;
}
<div>
  12333&shy;2333&shy;233&shy;23339392&shy;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 상자에서 벗어납니다.

추가적으로 &shy; 귀하의 예에서는 다음 중 하나가 작동하지 않습니다.

  • 단어 분리 시 작동하지만 단어 분리가 아닌 경우 하이픈을 표시하지 않습니다.

  • 단어를 깨뜨리지 않으면 작동하지만 휴식 시간에 하이픈을 추가하기 때문에 단어를 깨뜨릴 때 두 개의 하이픈을 표시하십시오.

이 특정 인스턴스(문자열에 하이픈이 포함되는 경우)에서는 텍스트를 다음 서버측으로 변환합니다.

<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&shy;222222&shy;-333333&#8203;444444-&#8203;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 엔터티(십진수) 

&#8209;

대신에 - 당신이 사용할 수있는 &hyphen; 또는 \u2010.

또한, 하이픈 CSS 속성은 ~ 아니다 로 설정 없음 (기본값은 수동).

<wbr> 에서는 지원되지 않습니다 인터넷 익스플로러.

이것이 도움이 되기를 바랍니다

사용 <br>(break) 줄을 끊고 싶은 곳에 태그를 붙입니다.

하이픈 문자 뒤에 너비가 0인 공백을 사용할 수 있습니다.

div {
  width: 150px;
}
<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

하이픈을 사용하기 전에 줄바꿈을 원하는 경우 &#8203;- 대신에.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top