-
[CSS/SCSS] 항상 까먹는 Text 말줄임표(...) 적용하기 !!!나는야 개발자/CSS 2022. 12. 7. 10:28
안녕하세요~
오늘 다룰 주제는 !!
'Card' 또는 '게시판 내용 미리보기' 등을 만들때 필요한
"
말 줄 임 표
(...)
"
를 적용시켜보려고 합니다.
바로 렛추고( Let's go ) 해볼까용 ? 😁
말줄임표를 적용하는 방법에는 크게 2가지가 있습니다.
1. 1줄로만 보여지는 경우
2. 2줄 이상으로 보여지는 경우
각각의 경우 CSS가 어떻게 적용되고, 차이점이 무엇인지 한 번 알아보겠습니다.
1. 1줄로만 보여지는 경우
.box{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }css를 위와같이 적용시킵니다.
<body> <p class='box'> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> /* * 예시 문구는 * https://www.lipsum.com/ * 에서 가져오시면 됩니다. */ </body>html을 위와같이 작성 후 화면을 띄워보시면,
결과 위와 같이 나오는 것을 확인 할 수 있습니다.
2. 2줄 이상으로 보여지는 경우
위의 css에서 웹을 통해 2줄 이상에 적용시키는 방법을 찾아보았는데요..?
.box{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }정말 단순하게 -webkit 만 추가하면 된다 ??
아닙니다 !!
위와 같은 상태에서 -webkit을 적용시켜 봤자 말줄임표는 1줄만 적용이 됩니다.
Q. 인터넷에 나오는대로 적용했는데 왜 저는 안되나요 😢 ?
이런 질문 던지시는 일 없도록 이제 부터 집중 !!
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
-webkit-line-clamp - CSS: Cascading Style Sheets | MDN
The -webkit-line-clamp CSS property allows limiting of the contents of a block to the specified number of lines.
developer.mozilla.org
위의 문서에서 올바르게 -webkit-line-clamp를 적용시키는 방법을 확인 할 수 있는데요.
내용을 살표보면..
'display', '-webkit-box-orient', 'overflow' 속성만(only) !!
설정해주면 간단하게 적용할 수 있다고 되어있습니다.
문서의 내용에 따라 css를 수정해 보겠습니다.
.box{ display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }그리고 결과를 보면,
그제서야 저희가 원하는 줄수 만큼 자른 후
말줄임표가 생성되는 것을 확인 할 수 있습니다.
즉, -webkit-line-clamp를 적용시킬 떄는
'text-overflow' 속성과 'white-space' 속성을
적용시킬 필요가 없다 !!
지금까지
기초면서도 막상 적용시킬려고하면
뭘 어떻게 건드려야했더라🤔? 하고 늘 찾아보게되는
'텍스트 말줄임표'에 대해 알아보았습니다.
더 이상 헷갈리지 마시고 !!
이번 포스팅을 빌어 한단계 더 성장하는 '프론트엔드 개발자'가 되시기를 바랍니다.
( 나도 ~ 😁😁)
다음에도 유익한 포스팅으로 찾아뵙도록 하겠습니다.
감사합니다 ._.