CSS day21
| overflow | text-overflow | white-space |
텍스트 관련 스타일
웹 문서에서 텍스트를 둘러싸고있는 상자 안에서 텍스트의 양이 많을 경우 텍스트를 중간에 끊고 뒤에 ‘…’ 으로 마무리 지어버리는 것을 본 적이 있을 것이다. 이러한 세부적인 텍스트 스타일에 대해 배워보자
이와 관련하여 overflow, text-overflow, white-space가 있다.
text-overflow
택스트가 기준선(상자)을 벗어나 넘칠 경우 넘치는 텍스트를 어떻게 처리할지 설정한다.
속성값으로는 clip과 ellipsis가 있다.
clip은 기본값으로 넘칠 부분을 중간에 자르는 속성값이고 ellipsis는 clip으로 자른 부분 뒤에 ‘…‘를 붙이는 속성값이다.
text-overflow를 사용하기 위해서는 두가지의 조건에 충족해야한다.
overflow가 hidden, scroll, auto이 3개중에 하나여야하며, white-space는 nowrap일 경우 속성이 적용되니 이 점을 유의하자.
그럼 다음으로 overflow에 대해 알아보자.
overflow
overflow는 기준선(상자)을 벗어나 넘칠 경우 넘치는 값을 어떻게 처리할지 설정하는 속성으로 속성값으로 hidden, scroll, visible 등이 있다.
visible는 기본값으로 기준선을 벗어난 텍스트에 대해 그대로 보여주는 속성값이고, scroll는 상자 내부에 스크롤을 만들어 텍스트를 보기위해 스크롤을 움직이게끔 만들어준다. hidden은 기준선을 벗어난 텍스트에 대해 잘라버리는 속성이다.
white-space
white-space은스페이스와 탭, 줄바꿈, 자동 줄바꿈을 어떻게 처리할지 설정하는 속성값이다. wrap는 기본 속성값으로 기준선에 텍스트가 도달했을 경우 텍스트를 한 줄 밑으로 내려 정상적으로 진행한다. nowrap은 텍스트가 기준선에 도달하는 것과 무관하게 한줄로 모든 텍스트를 작성한다.
<style>
.content{
border: 3px dotted red;
width: 400px;
padding: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<body>
<p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Doloribus in ipsum quod ea quibusdam minus consectetur ipsam suscipit maxime
alias, laboriosam, eveniet ipsa quidem voluptate. Nesciunt magnam voluptatem
nulla quibusdam!
</p>
</body>
