CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

개요

word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성은 입니다.

  • 기본값 : normal
  • 상속 : Yes
  • 애니메이션 : No
  • 버전 : CSS Level 3

문법

word-break: normal | break-all | keep-all | initial | inherit;
  • normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈합니다.
  • break-all : 글자 기준으로 줄바꿈합니다.
  • keep-all : 단어 기준으로 줄바꿈합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

반응형 웹디자인의 경우 가로 크기가 작을 때를 대비해서 word-break의 속성값을 break-all로 정하는 것이 좋습니다.

예제 1

영어로 긴 단어가 있을 때, 속성값 별로 어떻게 줄바꿈이 되는지 비교하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        font-family: sans-serif;
      }
      .a {
        word-break: normal;
      }
      .b {
        word-break: break-all;
      }
      .c {
        word-break: keep-all;
      }
      span {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>normal</h1>
    <p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean necmollisnulla. <span>Phaselluslaciniatempusmauriseulaoreet.</span> Proin gravida velit dictum dui consequat malesuada.</p>
    <h1>break-all</h1>
    <p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean necmollisnulla. <span>Phaselluslaciniatempusmauriseulaoreet.</span> Proin gravida velit dictum dui consequat malesuada.</p>
    <h1>keep-all</h1>
    <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean necmollisnulla. <span>Phaselluslaciniatempusmauriseulaoreet.</span> Proin gravida velit dictum dui consequat malesuada.</p>
  </body>
</html>

영어이므로 속성값이 normal일 때와 keep-all일 때의 결과가 같습니다.

예제 2

한글로 긴 단어가 있을 때, 속성값 별로 어떻게 줄바꿈이 되는지 비교하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        font-family: sans-serif;
      }
      .a {
        word-break: normal;
      }
      .b {
        word-break: break-all;
      }
      .c {
        word-break: keep-all;
      }
      span {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>normal</h1>
    <p class="a">찬미를 위하여 그들은 열매를 되는 길지 교향악이다. 같이, 뜨고, <span>용기가얼마나청춘의청춘의사막이다.</span> 청춘은 웅대한 스며들어 평화스러운 오직 쓸쓸하랴? 인간의 우리의 이상은 하는 힘차게 봄바람이다. 구하기 구하지 눈이 가는 있다.</p>
    <h1>break-all</h1>
    <p class="b">찬미를 위하여 그들은 열매를 되는 길지 교향악이다. 같이, 뜨고, <span>용기가얼마나청춘의청춘의사막이다.</span> 청춘은 웅대한 스며들어 평화스러운 오직 쓸쓸하랴? 인간의 우리의 이상은 하는 힘차게 봄바람이다. 구하기 구하지 눈이 가는 있다.</p>
    <h1>keep-all</h1>
    <p class="c">찬미를 위하여 그들은 열매를 되는 길지 교향악이다. 같이, 뜨고, <span>용기가얼마나청춘의청춘의사막이다.</span> 청춘은 웅대한 스며들어 평화스러운 오직 쓸쓸하랴? 인간의 우리의 이상은 하는 힘차게 봄바람이다. 구하기 구하지 눈이 가는 있다.</p>
  </body>
</html>

한글이므로 normal일 때와 break-all일 때의 결과가 같습니다.

브라우저 지원

  • Chrome : 4.0+
  • Firefox : 15.0+
  • Internet Explorer : 5.5+
  • Opera : 15.0+
  • Safari : 3.1+

Related Posts

CSS / 배경색만 투명하게 만들기

CSS / 배경색만 투명하게 만들기

배경과 내용의 투명도 CSS의 opacity 속성으로 요소의 투명도를 정할 수 있습니다. opacity 속성은 선택한 요소의 배경과 내용 모두를 투명하게 만듭니다. 간단한 예제는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { ...

CSS / border-collapse / 표(table)의 테두리와 셀(td)의 테두리 사이의 간격 처리 방식 정하는 속성

CSS / border-collapse / 표(table)의 테두리와 셀(td)의 테두리 사이의 간격 처리 방식 정하는 속성

개요 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정합니다. 기본값 : separate 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 border-collapse: separate | collapse | initial | inherit separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다. collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다. initial : 기본값으로 설정합니다. inherit ...

CSS / 애니메이션 / animation / animation-duration - 진행 시간 정하는 속성

CSS / 애니메이션 / animation / animation-duration - 진행 시간 정하는 속성

animation-duration animation-duration은 애니메이션의 진행 시간을 정하는 속성입니다. 애니메이션 관련 속성은 IE 버전 10 이상에서 사용할 수 있습니다. 문법 animation-duration: time | initial | inherit time : 시간을 정합니다. 기본값은 0입니다. 단위는 s(초) 또는 ms(1000분의 1초)를 사용합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 3초에 걸쳐 박스가 커지는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> @keyframes big { from { width: 0px; height: ...

CSS / list-style-type / 목록 앞의 마커 정하는 속성

CSS / list-style-type / 목록 앞의 마커 정하는 속성

목록은 <ul> 또는 <ol> 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 모양의 마커를 사용할지는 list-style-type으로 정합니다. 속성값은 다음과 같습니다. <ul> : disc, circle, square <ol> : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha 공통 : none 의미상으로는 <ul>과 <ol>에 사용하는 속성값을 구분하는게 맞지만, <ul>에 decimal을 사용하거나 <ol>에 disc를 사용하는 ...

CSS / Flex / align-self / 아이템의 교차축 정렬 정하는 속성

CSS / Flex / align-self / 아이템의 교차축 정렬 정하는 속성

align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 이렇게 정한 정렬은 콘테이너 안의 모든 아이템에 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성

CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성

개요 box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 box-sizing: content-box | border-box | initial | inherit content-box : 콘텐트 영역을 기준으로 크기를 정합니다. border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> ...

CSS / list-style-image / 목록의 마커로 이미지 사용하기

CSS / list-style-image / 목록의 마커로 이미지 사용하기

개요 list-style-image로 이미지를 ul, ol 등의 목록의 마커(marker)로 사용할 수 있습니다. 기본값 : none 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-image: none | url | initial | inherit none : 이미지가 없습니다. url : 사용할 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 이미지는 원본 크기 그대로 나옵니다. 따라서 글자 크기에 ...

CSS / Flex / display

CSS / Flex / display

display: flex Flex로 요소를 배열하고 싶을 때 Container에 display: flex;를 추가합니다. 아래와 같은 문서에… <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { padding: 10px; ...

CSS / Flex / align-items

CSS / Flex / align-items

align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 예를 들어 flex-direction의 값이 row인 경우 수직 정렬을 정합니다. 아래는 flex-direction: row일 때의 예제입니다. 기본값은 stretch로, 콘테이너의 높이에 맞게 늘립니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / 기초 / 문법

CSS / 기초 / 문법

문법 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값이라고 합니다. 선택자(selector) : 무엇을 꾸밀지 정합니다. h1은 h1 요소를 꾸미겠다는 뜻입니다. 속성(property) : 어떤 모양을 꾸밀지 정합니다. color는 색을 꾸미겠다는 뜻입니다. 값(value) : 어떻게 꾸밀지 정합니다. red는 빨간색으로 만들겠다는 뜻입니다. 즉, CSS 코드는 다음처럼 구성됩니다. selector ...

CSS 강좌