[CSS] 하위 요소 적용 및 단어단위로 줄바꾸기

bodyViewBody클래스의 직계 자식요소들에 적용

<style>
.boardViewBody > * {
	word-break: keep-all;
}
</style>

 

bodyViewBody클래스의 모든 하위 자식요소들에 적용

<style>
.boardViewBody * {
	word-break: keep-all;
}
</style>

 

 

---

 

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

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

속성(Property)

속성값	값(예)	설명
normal	word-break: normal;	기본 줄바꿈 규칙 적용
keep-all	word-break: keep-all;	줄바꿈 할 때 단어를 유지하며 적용
break-all	word-break: break-all;	CJK(중국어,일본어,한국어) 텍스트에서는 작동 안됨
break-word	word-break: break-word;	overflow-wrap: break-word 속성과 동일하기 때문에 현재는 사용 X

출처: https://webstoryboy.co.kr/1716 [WEBSTORYBOY:티스토리]