[CSS] 긴 URL/긴 문자의 줄바꿈

위의 그림과 같이 긴 URL이나 긴 문자가 컨텐츠 영역을 벗어나 표시되는 경우가 있습니다. 이 경우 CSS를 통해 컨텐츠 영역 끝에 도달하면 줄바꿈하도록 처리할 수 있습니다.

긴 URL/긴 문자의 줄바꿈

콘텐츠 영역을 벗어난 긴 URL이나 긴 단어를 강제 줄바꿈 되도록 하려면 다음과 같은 CSS 코드를 사용하면 됩니다.

.entry-summary {
word-wrap: break-word;
}

위에서 요소명은 적절히 수정하도록 합니다. 그러면 다음과 같이 긴 URL이 영역을 벗어나지 않고 줄바꿈이 됩니다.

break-word 대신 break-all을 사용하면 문자 사이에서도 줄바꿈이 됩니다(모질라 문서 참조).

word-break: break-all;

위의 CSS 코드가 잘 작동하지 않으면 다음과 같은 코드를 시도해보시기 바랍니다.

overflow-wrap: break-word;
word-wrap: break-word;

다음과 같은 CSS 코드도 시도해볼 수 있습니다.

white-space: pre-line;

overflow가 될 때 컨텐츠를 숨기고 말줄임표(...)로 대체하려면 다음을 사용하면 됩니다.

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

참고:

• 워드프레스에서 CSS 추가하기