728x90
300x250
word-break
줄바꿈 할 때 어떤 기준으로 줄바꿈 할지 정하는 속성
/* 키워드 값 */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* 사용 안함 */
/* 전역 값 */
word-break: inherit;
word-break: initial;
word-break: unset;
normal : CJK(한중일) 문자는 글자 기준, 이외에는기본 줄 바꿈 규칙 사용
break-all : 글자기준으로 줄바꿈
keep-all : CJK(한중일) 문자에서는 단어 기준으로 줄바꿈 그 이외에는 normal과 동일
break-word : overflow-wrap 속성에 상관하지 않고, word-break: normal과 overflow-wrap: anywhere를 설정한 것과 같은 효과를 낸다.
initial : 초기값으로 설정
inherit : 부모의 속성값을 상속
예제
html
p>1. <code>word-break: normal</code></p>
<p class="normal narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
<p>4. <code>word-break: break-word</code></p>
<p class="breakWord narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
css
.narrow {
padding: 5px;
border: 1px solid;
display: table;
max-width: 100%;
}
.normal {
word-break: normal;
}
.breakAll {
word-break: break-all;
}
.keepAll {
word-break: keep-all;
}
.breakWord {
word-break: break-word;
}
참고 : https://developer.mozilla.org/ko/docs/Web/CSS/word-break
728x90
반응형
'Front-end > CSS' 카테고리의 다른 글
[css] flex-flow, flex-direction, flex-wrap (0) | 2021.10.17 |
---|---|
box-shadow 속성 그림자 효과 css (0) | 2021.09.09 |
css3 추가된 글꼴 속성 (0) | 2021.08.06 |
css 배경 투명하게 (0) | 2021.08.05 |
placeholder 색상 틀리게 적용하기 input text-area 기본글자 모양 변경하기 (0) | 2021.07.06 |
댓글