white-space: normal
: 기본값, 자동으로 줄 바꿈이 된다.white-space: nowrap
: 자동 줄바꿈 안됨 (엔터와 스페이스바 적용 안됨)white-space: pre
: 자동 줄바꿈 안됨 (엔터와 스페이스바 적용 됨)white-space: pre-wrap
: 자동 줄바꿈 가능, pre 태그처럼 공백이나 엔터 인식white-space: pre-line
: 자동 줄바꿈 가능, 엔터 인식 됨(스페이스 인식 안됨)overflow: visible
: 기본값. 넘친 요소를 다 보여줌overflow: hidden
: 넘친 요소를 숨김overflow: scroll
: 요소의 크기만큼만 보이게 해주고, 스크롤바가 생성되어 넘친 요소를 볼 수 있게 해줌위 사진은 다음 사이트의 게시판인데, 게시판을 보면 헤드라인이 말줄임표가 되어 있는 것을 볼 수 있다. 이런 경우에는 width 값이 정해져 있어야 되고, overflow 속성, text-overflow 속성, white-space 속성이 필요하다.
<body>
<div class="container">
<div class="left-box">
<img src="./images/dandelion-gb51dd018d_1280.jpg" alt="">
<img src="./images/dandelion-gb51dd018d_1280.jpg" alt="">
<img src="./images/dandelion-gb51dd018d_1280.jpg" alt="">
<img src="./images/dandelion-gb51dd018d_1280.jpg" alt="">
<img src="./images/dandelion-gb51dd018d_1280.jpg" alt="">
<img src="./images/dandelion-gb51dd018d_1280.jpg" alt="">
</div>
<div class="right-box">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis fuga molestiae praesentium optio officia id quam voluptate consectetur placeat?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis fuga molestiae praesentium optio officia id quam voluptate consectetur placeat?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis fuga molestiae praesentium optio officia id quam voluptate consectetur placeat?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis fuga molestiae praesentium optio officia id quam voluptate consectetur placeat?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis fuga molestiae praesentium optio officia id quam voluptate consectetur placeat?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nobis fuga molestiae praesentium optio officia id quam voluptate consectetur placeat?</p>
</div>
</div>
</body>
.container {
display: flex;
width: 500px;
overflow: hidden;
}
.container .left-box {
flex: 50%;
}
.container .left-box img {
width: 200px;
}
.container .right-box {
flex: 50%;
width: 250px;
}
.container p {
white-space: nowrap;
width: 250px;
overflow: hidden;
text-overflow: ellipsis;
}
text-align: center
가 아닌 flex를 이용해서 글씨를 가운데로 정렬할 수 있다.<div class="container">
<div class="box">center</div>
</div>
.container {
background-color: blue; /*구분하기 쉬우려고 백그라운드를 준 것이다.*/
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.box {
background-color: #fff;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
처음에는 컨테이너 박스에 width 값을 지정하고, overflow를 적용하고 각 문단에다가 text-overflow를 이용해서 말줄임표를 적용할 수 있을 거라고 생각했다. 하지만 각각 적용해줘야 된다는 것을 이번 예제를 혼자 만들어 보면서 깨달았다. 만약 직접 만들어보지 않았더라면, 알지 못했을 거라고 생각한다...!ㅠㅠ