본문 바로가기
Reference/CSS

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

by @webstoryboy 2022. 11. 21.

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

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
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);
        })
    })
});

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
overflow-wrap

참고(Reference)


댓글