하이픈이 불필요하게 렌더링되지 않도록 CSS에서 하이픈이나 소프트 하이픈을 사용할 수 있나요?

나의 목표는 가능한 한 원본 텍스트를 유지하고 너무 길어서 컨테이너 너비에 맞지 않기 때문에 절대적으로 중요한 단어가 아닌 이상 단어를 분리하는 것입니다.

나의 구체적인 사례

"Hi Superman"이라는 텍스트를 다음과 같이 렌더링하고 싶습니다.

"Superman"이라는 단어가 너무 길어서 컨테이너에 맞지 않으면 다음과 같이 하이픈을 추가하고 싶습니다.

안녕하세요 슈퍼- 남자

그러나 "Superman"이라는 단어가 컨테이너에 들어갈 수 있는 경우 하이픈 없이 렌더링해야 합니다

안녕하세요 슈퍼맨

위의 상황이 가능하다면('슈퍼맨'에는 하이픈이 없어도 됨) 불필요한 하이픈을 추가하는 것은 허용되지 않습니다.

안녕하세요 슈퍼- 남자

필요하다면 HTML을 변경할 수 있습니다. 의미 있는 방식으로 하이픈을 삽입할 수 있습니다(각 하이픈 사이에 3글자 이상이면 됩니다. "Superma-n"은 절대 좋지 않습니다)

내가 시도한 것

부드러운 하이픈이 해결책이라고 생각합니다. 그래서 저는 다음을 사용했습니다:Hi Superman

그러나 이것이 위에 표시된 "불필요한 하이픈"이라는 용납할 수 없는 상황으로 이어진다는 것을 알았습니다.

실패한 스니펫 표시:

body { 왼쪽 여백: 30px; } div { 테두리: 단색 1px 검정색; } .넓은 { 테두리: 단색 1px 파란색; 너비: 500px; } .좁은 { 테두리: 단색 1px 빨간색; 너비: 360px; } h2 { 글꼴 모음: 'Courier New'; 글꼴 두께: 400; 글꼴 크기: 87px; } 코드 { 배경색: #eee; }

 Super­man "슈퍼맨"이라는 단어 전체가 맞지 않습니다
 
 
안녕하세요 슈퍼&수줍은 남자
 
그러나 이 경우 "Superman"이라는 단어는 하이픈 없이 두 번째 행에 들어갈 수 있습니다. 하지만 제 경우에는 어쨌든 하이픈을 추가하기로 결정했습니다. 이번에도 이전 예제와 동일한 코드를 사용합니다. 슈퍼&수줍;남자
 
안녕하세요 슈퍼&수줍은 남자
 
Hi &wbr> Super­man와 같이 "Superman" 앞에 단어 구분 태그를 추가해 보았지만 도움이 되지 않았습니다.
 ; 
 
안녕하세요 슈퍼&수줍은 남자

CSS만 사용하여 위의 예를 해결할 수 있나요? (다른 word-break 속성을 시도했지만 성공하지 못했습니다.)

제 생각에는 CSS의 특성상 일반 HTML과 CSS만으로는 이 문제를 해결하는 것이 불가능합니다. 나는 CSS가 텍스트를 한 줄씩 구문 분석한다고 가정하고 있으며, 텍스트의 다음 줄에 "더 잘 맞는" 단어가 있는지 결코 알 수 없습니다. 하이픈이 발견되면 현재 텍스트 줄의 최대 문자 수에 맞추려고 시도합니다.

HTML과 CSS만 사용하거나 전혀 사용하지 않고 이 문제를 해결하고 싶습니다.

최고:

• 텍스트 구문 분석에 JavaScript를 사용하지 않습니다.

• div의 너비와 텍스트에 하이픈이 필요한지 여부에 따라 각 div에 대해 서로 다른 CSS 속성을 설정하고 싶지 않습니다.

• 내 텍스트 주위에 줄 바꿈을 추가하고 싶지 않습니다

• 자동 하이픈이 없으면 "Superma-n"과 같은 말도 안되는 하이픈이 생성됩니다(하지만 각 하이픈 사이에 3개의 문자만 있으면 자동 하이픈을 사용할 수 있습니다. 예를 들어 "Sup- 어만")