text-overflow, white-space, overflow

위의 글 처럼 텍스트가 기준점을 넘어가면 ...으로 표시되게 하는 것

<style>
    .content p{
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
    }
</style>

1.text-overflow

텍스트가 기준점을 넘어 넘칠 경우 처리 방법을 설정하는 것
'text-overflow'의 경우 두 가지 경우를 충족 시켜야지만 사용 가능한 css속성
1번째: 'white-space:nowrap'를 사용하여 줄바꿈을 못하게 해야한다.
2번째: 'overflow'의 값을 'visivle'제외한 다른 값을 입력해 주어야 사용이 가능

{text-overflow:clips;} 뒤에 넘치는 단어를 잘라버립니다
{text-overflow: ellipsis;} 뒤에 넘치는 단어에 말 줄임표(...)를 붙여줍니다

2.white-space

'white-space'의 기본속성은 한 줄이 길어서 넘칠 경우 자동으로 줄 바뀜
'nowrap'으로 지정하게 되면 텍스트가 넘치더라도 줄을 바꾸지 않고 출력

{ white-space: 'nowrap'; }

3.overflow

'overflow'는 요소의 크기가 블록을 담고 있는 크기를 초과할 경우 처리하기 위해 사용하는 태그
기본값으로 'visible'값이 입력되는데 넘치는 요소들은 전부 보여지게 한다
'hidden'으로 속성값을 줄 경우 넘치는 부분을 숨겨 보이지 않게 해준다
'scroll'은 스크롤 형태로 요소가 보이게 한다