웹페이지를 작성할때 말줄임표 처리해줘야 하는 경우가 있습니다.
원하는 너비, 높이에 비해서 텍스트의 양이 많을 때 텍스트가 넘치지 않도록 적당한 부분에서 잘라줘야 레이아웃이 틀어지거나 늘어지는 등의 문제없이 사이트를 예쁘게 화면에 출력할수 있습니다.
또 말줄임표 뒤에 내용이 더 있을거라는 암시가 되기도 합니다.
말줄임표는 CSS로 간단히 처리할수 있는데, 한줄과 여러줄을 처리하는 방법이 각각 다릅니다.
💬 1줄 말줄임표 처리
① 우선 말줄임 처리를 하려는 요소가 block 요소여야 합니다. 너비를 가져야 하기때문에!
② width와 height값을 지정해줍니다.
③ white-space:nowrap 속성으로 요소안에서 텍스트 줄바꿈이 일어나지 않도록 만들어줍니다.
④ overflow:hidden 속성을 통해 넘치는 부분을 잘라줍니다.
⑤ text-overflow:ellipsis 속성을 적어주면 1줄 말줄임표 처리 끝!
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;👉 width값, height값을 주고, 위 코드를 복사해서 붙여넣기 하면 간단합니다.
💬 여러줄 말줄임표 처리
① width와 height값을 지정해줍니다. (1줄과 동일)
② overflow:hidden 속성을 통해 넘치는 부분을 잘라줍니다.
③ display:-webkit-box 속성을 적용해줍니다. 블록의 배치순서를 임의로 바꿀수있게 해줍니다.
④ -webkit-line-clamp:- 속성값에는 원하는 줄 수를 적어줍니다.
⑤ -webkit-box-orient:vertical 컨텐츠를 가로 또는 세로로 배치할지 여부를 결정하는 속성입니다.
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: /원하는 줄 갯수/;
-webkit-box-orient: vertical;👉 역시 width값, height값을 주고, 위 코드를 복사해서 붙여넣기 하면 간단합니다.
