Reference/CSS

overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다.

by @webs 2022. 11. 19.

overflow-wrap

overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다. <wbr> 태그와 동일한 기능입니다. 한국어는 적용되지 않으며, 영어에 적용됩니다.

특징	설명
기본값	overflow-wrap : normal
적용	text
버전	CSS3
사용성	★☆☆☆☆

정의(Definition)

overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다.
overflow-wrap 속성은 한국어에는 적용되지 않습니다.
overflow-wrap 속성은 <wbr> 태그와 기능이 동일합니다.

줄바꿈과 관련된 속성 및 태그

white-space 속성은 줄바꿈, 공백 여부를 설정합니다.
word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다.
overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다.
hyphens 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다.
<br> 태그는 텍스트 줄바꿈을 설정합니다.
<wbr> 태그는 의미가 없는 텍스트 줄바꿈을 설정합니다.
<pre> 태그는 공백을 설정합니다.

문법(Syntax)

overflow-wrap : normal | break-word | anywhere

/* 기본 속성 */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

/* 전역 속성 */
overflow-wrap: inherit;   /* 상속 */
overflow-wrap: initial;   /* 초기화 */
overflow-wrap: revert;    /* 원래대로 돌리기 */
overflow-wrap: unset;     /* 설정 해제 */

속성(Property)

속성값	값(예)	설명
normal	overflow-wrap: normal;	줄바꿈 지점에서 변경됩니다.
break-word	overflow-wrap: break-word;	줄바꿈 지점이 없을 경우 단어를 기준으로 변경합니다.
anywhere	overflow-wrap: anywhere;	줄바꿈 지점이 없을 경우 임의로 변경합니다.

예제1(Sample)

줄바꿈을 설정한 예제입니다.

의미없는 한글을 작성하였습니다. 이어어ㅓ어어어어어어지다아아어리자얼니아런일ㄴㅇ라ㅓㄴ아런이ㅓㄹ

의미없는 영어를 작성하였습니다. sdfsdfsdfsdfsdfsdfsdfsdfsdffsdfsdfsdwebfsdsdfsdfdsfsdfsdf

의미없는 주소를 작성하였습니다. https://w3c.github.io/csswg-drafts/css-text/#overflow-wrap-property

overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere;

HTML

CSS

SCRIPT

<div class="text-box">
    <div class="box">
        <em>의미없는 한글을 작성하였습니다.</em>
        <strong>이어어ㅓ어어어어어어지다아아어리자얼니아런일ㄴㅇ라ㅓㄴ아런이ㅓㄹ</strong>
    </div>
    <div class="box">
        <em>의미없는 영어를 작성하였습니다.</em>
        <strong>sdfsdfsdfsdfsdfsdfsdfsdfsdffsdfsdfsdwebfsdsdfsdfdsfsdfsdf</strong>
    </div>
    <div class="box">
        <em>의미없는 주소를 작성하였습니다.</em>
        <strong>https://w3c.github.io/csswg-drafts/css-text/#overflow-wrap-property</strong>
    </div>
</div>

.text-box {
    display: flex;
    justify-content: space-between;
}
.text-box .box {
    width: 32%;
    line-height: 1.4;
    border: 1px solid #333;
    padding: 1%;
}
.text-box .box strong {
    font-weight: bold;
}
.text-box .box em {
    text-decoration: underline;
}

const box1 = document.querySelector("#sample1 .text-box")
                     
document.querySelectorAll("#sample1 .sampleBtn a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        e.preventDefault();
        const text = btn.innerText;
        document.querySelectorAll("#sample1 .text-box .box strong").forEach(box => {
            box.setAttribute("style", text);
        })
    })
});