<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 Superman</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­man</code> "슈퍼맨"이라는 단어 전체가 맞지 않습니다</p>
<p>
<div class="narrow"><h2>안녕하세요 슈퍼&수줍은 남자</h2></div>
<p>그러나 이 경우 "Superman"이라는 단어는 하이픈 없이 두 번째 행에 들어갈 수 있습니다. 하지만 제 경우에는 어쨌든 하이픈을 추가하기로 결정했습니다.
이번에도 이전 예제와 동일한 코드를 사용합니다.
<code>슈퍼&수줍;남자</code></p>
<div class="wide"><h2>안녕하세요 슈퍼&수줍은 남자</h2></div>
<p><code>Hi &wbr> Super­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>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS 3에는 하이픈을 설정하는 "
hyphens”属性，可根据指定的lang" 속성이 포함되어 있습니다. 하지만 이것은 단지 작업 중인 초안이므로 지원이 약간 아직입니다.로 설정할 수 있습니다.
없음이므로 하이픈이 표시되지 않습니다-
수동으로 특수 문자 - 가 선언된 곳에서만 단어 구분이 이루어집니다. 또는
auto, 현지화에 따라 필요한 곳에 하이픈을 자동으로 추가합니다. -
Firefox, Edge, 심지어 IE에서도 잘 작동하지만, 가장 큰 문제는 웹킷이 "auto" 값을 지원하지 않는다는 것입니다. Mac 및 Android를 제외하고 이것이 허용되는 유일한 값입니다. 네, 이건 이상한­버그입니다.
이것은 예시입니다. windows/linux를 실행하는 경우 Firefox와 Chrome의 차이점을 꼭 확인하세요.이를 지원하는 브라우저에서는 텍스트가 하이픈으로 표시되고 웹킷에서는 하이픈으로 묶이지 않게 되는 것입니다.
work-break:break-all긴 단어 주위에
display: inline-block가 포함된 용기를 사용하세요.