필요한 경우에만 하이픈을 표시하시겠습니까? (부드러운 하이픈은 잘리지 않습니다)

Question

<p>하이픈이 불필요하게 렌더링되지 않도록 CSS에서 하이픈이나 소프트 하이픈을 사용할 수 있나요? </p> <p>나의 목표는 가능한 한 원본 텍스트를 유지하고 너무 길어서 컨테이너 너비에 맞지 않기 때문에 절대적으로 중요한 단어가 아닌 이상 단어를 분리하는 것입니다. </p> <h3>나의 구체적인 사례</h3> <p>"Hi Superman"이라는 텍스트를 다음과 같이 렌더링하고 싶습니다. </p> <p>"Superman"이라는 단어가 너무 길어서 컨테이너에 맞지 않으면 다음과 같이 하이픈을 추가하고 싶습니다. </p> <pre class="brush:php;toolbar:false;">안녕하세요 슈퍼- 남자</pre> <p>그러나 "Superman"이라는 단어가 컨테이너에 들어갈 수 있는 경우 하이픈 없이 렌더링해야 합니다</p> <pre class="brush:php;toolbar:false;">안녕하세요 슈퍼맨</pre> <p>위의 상황이 가능하다면('슈퍼맨'에는 하이픈이 없어도 됨) <em>불필요한 하이픈</em>을 추가하는 것은 허용되지 않습니다. </p> <pre class="brush:php;toolbar:false;">안녕하세요 슈퍼- 남자</pre> <p>필요하다면 HTML을 변경할 수 있습니다. 의미 있는 방식으로 하이픈을 삽입할 수 있습니다(각 하이픈 사이에 3글자 이상이면 됩니다. "Superma-n"은 절대 좋지 않습니다)</p> <h3>내가 시도한 것</h3> <p>부드러운 하이픈이 해결책이라고 생각합니다. 그래서 저는 다음을 사용했습니다:<code>Hi Super­man</code></p> <p>그러나 이것이 위에 표시된 "불필요한 하이픈"이라는 용납할 수 없는 상황으로 이어진다는 것을 알았습니다. </p> <h3>실패한 스니펫 표시: </h3> <p> <pre class="snippet-code-css lang-css Prettyprint-override"><code>body { 왼쪽 여백: 30px; } div { 테두리: 단색 1px 검정색; } .넓은 { 테두리: 단색 1px 파란색; 너비: 500px; } .좁은 { 테두리: 단색 1px 빨간색; 너비: 360px; } h2 { 글꼴 모음: 'Courier New'; 글꼴 두께: 400; 글꼴 크기: 87px; } 코드 { 배경색: #eee; }</code></pre> <pre class="snippet-code-html lang-html Prettyprint-override"><code><p> <code>Super&shy;man</code> "슈퍼맨"이라는 단어 전체가 맞지 않습니다</p> <p> <div class="narrow"><h2>안녕하세요 슈퍼&수줍은 남자</h2></div> <p>그러나 이 경우 "Superman"이라는 단어는 하이픈 없이 두 번째 행에 들어갈 수 있습니다. 하지만 제 경우에는 어쨌든 하이픈을 추가하기로 결정했습니다. 이번에도 이전 예제와 동일한 코드를 사용합니다. <code>슈퍼&amp;수줍;남자</code></p> <div class="wide"><h2>안녕하세요 슈퍼&수줍은 남자</h2></div> <p><code>Hi &wbr> Super&shy;man</code>와 같이 "Superman" 앞에 단어 구분 태그를 추가해 보았지만 도움이 되지 않았습니다.</p> ; <p> <div class="wide"><h2>안녕하세요 <wbr>슈퍼&수줍은 남자</h2></div></code></pre> </p> <p>CSS만 사용하여 위의 예를 해결할 수 있나요? (다른 <code>word-break</code> 속성을 시도했지만 성공하지 못했습니다.)</p> <p><strong>제 생각에는</strong> CSS의 특성상 일반 HTML과 CSS만으로는 이 문제를 해결하는 것이 불가능합니다. 나는 CSS가 텍스트를 한 줄씩 구문 분석한다고 가정하고 있으며, 텍스트의 다음 줄에 "더 잘 맞는" 단어가 있는지 결코 알 수 없습니다. 하이픈이 발견되면 현재 텍스트 줄의 최대 문자 수에 맞추려고 시도합니다. </p> <p>HTML과 CSS만 사용하거나 전혀 사용하지 않고 이 문제를 해결하고 싶습니다. </p> <p>최고:</p>

<li><p>텍스트 구문 분석에 JavaScript를 사용하지 않습니다. </p> </li> <li><p>div의 너비와 텍스트에 하이픈이 필요한지 여부에 따라 각 div에 대해 서로 다른 CSS 속성을 설정하고 싶지 않습니다. </p> </li> <li><p>내 텍스트 주위에 줄 바꿈을 추가하고 싶지 않습니다</p> </li> <li><p>자동 하이픈이 없으면 "Superma-n"과 같은 말도 안되는 하이픈이 생성됩니다(하지만 각 하이픈 사이에 3개의 문자만 있으면 자동 하이픈을 사용할 수 있습니다. 예를 들어 "Sup- 어만")</p> </li>

Answer 1

CSS 3에는 하이픈을 설정하는 "hyphens”属性，可根据指定的 lang" 속성이 포함되어 있습니다. 하지만 이것은 단지 작업 중인 초안이므로 지원이 약간 아직입니다.

로 설정할 수 있습니다.

없음이므로 하이픈이 표시되지 않습니다
수동으로 특수 문자
• 가 선언된 곳에서만 단어 구분이 이루어집니다. 또는 &shy
auto, 현지화에 따라 필요한 곳에 하이픈을 자동으로 추가합니다.

Firefox, Edge, 심지어 IE에서도 잘 작동하지만, 가장 큰 문제는 웹킷이 "auto" 값을 지원하지 않는다는 것입니다. Mac 및 Android를 제외하고 이것이 허용되는 유일한 값입니다. 네, 이건 이상한

버그입니다.

이것은 예시입니다. windows/linux를 실행하는 경우 Firefox와 Chrome의 차이점을 꼭 확인하세요.

으아악 으아악

웹킷의 "자동" 지원 부족에 대한 일반적인 해결 방법은 웹킷과 함께 하이픈:자동을 사용하여

이를 지원하는 브라우저에서는 텍스트가 하이픈으로 표시되고 웹킷에서는 하이픈으로 묶이지 않게 되는 것입니다. work-break:break-all

Answer 2

긴 단어 주위에 display: inline-block가 포함된 용기를 사용하세요.

으아악 으아악