게시글 말줄임

💬 텍스트에 말줄임 표시를 주려면?

위와 같은 게시글 형식의 섹션을 디자인할 때 제목이나 내용에 말줄임(...)을 사용하는 경우가 많다.
말줄임표를 사용하면 해당 문장이 본래는 더 긴 문장이며 생략되었음을 암시해주는 역할을 한다.

1줄 말줄임

div{
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  /* 말줄임 적용 */
}

• white-space : no-wrap 속성은 영역 내 문장이 길 때 자동으로 다음줄로 내려가는 것을 제거한다.
• overflow : hidden 속성은 영역의 넘치는 요소를 숨겨준다.
  
  

2줄 이상 말줄임

div {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

• white-space : no-wrap 속성은 꼭 제거해야 한다
• display : -webkit-box 속성은 해당 영역을 box 형태로 관리되도록 한다.
• -webkit-line-clamp 속성은 영역 내의 컨텐츠의 최대 라인수를 결정한다.or
• -webkit-box-orient : vertical 속성은 영역 박스 내의 정렬을 수직으로 하도록 한다.
  
  

🤔 word-wrap, word-break?

 word-wrap: break-word;

my name is
ABCD, What's your
name?
이와 같이 단어를 기준으로 줌바꿈이 되는데 이때 단어의 길이가 길어지는 경우 위와 같이 불필요한 여백이 생길 수 있다. 이때 단어가 아닌 글자단위로 줄바꿈을 하고자 한다면 아래의 속성으로 처리한다.

 word-wrap: break-word;

my name is ABC
D, What's you
r name?
단어의 일부분이 잘리지만 불필요한 공백은 사라진다!

📌 패딩으로 여백을 주게 되면?

제 영역이므로 위와 같이 말줄임이 적용되지 않는다.
따라서 꼭 마진으로 여백을 줘야한다!