overflow2 [CSS] 텍스트가 넘칠경우 생략해서 ... 보여주는 방법 The brown fox jumps over the lazy dog. div { background-color: orange; font-size: 30px; padding: 20px; } 텍스트의 길이가 해당 요소보다 긴 경우에는 자동으로 줄바꿈이 일어난다 div { background-color: orange; font-size: 30px; padding: 20px; width: 200px; } white-space: nowrap 속성을 추가하면 자동으로 일어났던 줄바꿈이 일어나지 않고 텍스트가 요소 길이를 넘어선채 출력된다 div { background-color: orange; font-size: 30px; padding: 20px; width: 200px; white-space: nowrap; }.. 2022. 8. 8. [CSS] overflow 속성 정리 overflow 요소의 크기 이상으로 내용이 넘쳤을때 보여짐을 제어하는 단축 속성 overflow-x를 사용하면 x축(가로)만 개별적으로 제어할 수 있다 overflow-y를 사용하면 y축(세로)만 개별적으로 제어할 수 있다 overflow의 속성 1. visible (기본값) 넘친 내용을 그대로 보여줌 .parent { width: 200px; height: 150px; background-color: royalblue; margin: 20px; padding: 20px; overflow: visible; } .child { width: 300px; height: 100px; background-color: orange; } 2. hidden 넘친 내용을 잘라냄 .parent { width: 200px.. 2022. 4. 24. 이전 1 다음
