[CSS] 텍스트 줄바꿈, 말줄임 처리, 글자 자르기 css

 

 

 

 

 

공부했던 내용을 정리하는 용도로 오류가 있을 수 있습니다.

재배포 수정하지 마세요. 

 

 

 

 

 

 

 

 

 

웹페이지상에서 텍스트를 삽입할때 짧은 텍스트일경우는 문제가 없지만 block의 크기보다 넘치게 클 경우 넘치는 글을 잘라내거나 줄바꿈을 해야 하는 경우가 있다. 

그럴때 유용하게 사용할 수 있는 것이 white-spacing, text-overflow, word-break 이다. 

 

 

 

 

 

 

---

white-space 

 

공백 문자를 어떻게 다룰것인가를 지정한다. 

 

 

• normal : 정상적으로 출력하도록 지정한다. 연속된 공백 문자나 줄바꿈을 통합한다. 
• pre : 연속된 공백문자나 줄바꿈을 통합하지 않고 원문 그대로 출력한다. 
• nowrap : 연속된 공백문자는 출력하지만 줄바꿈은 통합하지 않는다. 

 

 

예제)  

 

 

원문: 

안녕하세요 

크리벨로퍼의 블로그입니다. 

오늘 하루도 즐거운 하루되세요. 화이팅! 

 

normal 

안녕하세요. 크리벨로퍼의 블로그입니다. 오늘 하루도 즐거운 하루되세요. 화이팅!

 

nowrap 

안녕하세요. 크리벨로퍼의 블로그입니다. 오늘 하루도 즐거운 하루되세요. 화이팅!

 

pre 

안녕하세요. 크리벨로퍼의 블로그입니다. 오늘 하루도 즐거운 하루되세요. 화이팅!

 

 

 

 

 

text-overflow

 

넘치는 텍스트 컨텐츠를 어떻게 보여줄것인지 지정한다. 

 

 

• clip : 기본값, 넘치는 부분을 그대로 잘라서 보여준다. 
• ellipsis : 잘라진 텍스트를 "..." 으로 표현한다. 
• "string" : "문자열"을 입력하면 잘라진 텍스트를 해당 문자열로 보여진다. 이 속성값은 firefox에서만 작동한다. 

 

예제)  

 

 

원문: 

크리벨로퍼 

 

clip 

크리벨로퍼

 

ellipsis 

크리벨로퍼

 

"string" 

크리벨로퍼

 

 

 

 

 

 

 

 

word-break

 

CJK 언어들이 아닌 언어를 사용했을때의 줄바꿈 규칙 (line breaking rules)을 지정한다. 

(CJK언어란 중국어 일본어 한국어를 지칭한다.)

 

 

• normal : 기본값, 사용자가 지정한 대로 줄바꿈시킨다. (사용자가 공백을 지정한대로)
• break-all : 두 글자 사이는 단어이든 아니든 글자 사이를 깨뜨려 줄바꿈시킨다.  
• keep-all : 단어는 깨뜨리지 않고 줄바꿈시킨다. 
• initial : 기본값으로 셋팅한다.
• inherit : 부모요소의 특징을 물려받는다.

 

 

 

예제)  

 

 

원문: 

Thisissomeveryveryverylong word. lalala blah-blah-blah Let's go! 

 

normal 

Thisissomeveryveryverylong word. lalala blah-blah-blah-blah Let's go!

 

break-all 

Thisissomeveryveryverylong word. lalala blah-blah-blah-blah Let's go!

 

keep-all 

Thisissomeveryveryverylong word. lalala blah-blah-blah-blah Let's go!