당신은 주제를 찾고 있습니까 “말줄임표 css – CSS만으로 말줄임표(점점점 찍히기) 만들기 한줄 or 두줄이상~! Pure CSS“? 다음 카테고리의 웹사이트 ppa.maxfit.vn 에서 귀하의 모든 질문에 답변해 드립니다: https://ppa.maxfit.vn/blog. 바로 아래에서 답을 찾을 수 있습니다. 작성자 리베하얀 이(가) 작성한 기사에는 조회수 1,258회 및 좋아요 49개 개의 좋아요가 있습니다.
말줄임표 css 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 CSS만으로 말줄임표(점점점 찍히기) 만들기 한줄 or 두줄이상~! Pure CSS – 말줄임표 css 주제에 대한 세부정보를 참조하세요
뉴스같은거 보면 기사 제목 나오다 말고 뒤에 점점점… 찍히죠?
같이 만들어봅시다~!! ㅎㅎ
– 리베하얀 –
* 1999부터 취미로 홈페이지 제작
* 2000부터 본격적인 업무로 홈페이지 제작
* 2007년부터 부업으로 강의 시작
* 실무와 강의를 병행하고 있고 대부분 영상의 내용은 실무 이야기를 많이 다루고 있습니다.
– 강의 안내 –
* 1:1 및 소규모 레슨 진행하고 있습니다.
* 홈페이지 제작 및 관련 상담 해드립니다.
* 취업 및 포트폴리오 관련 코칭 및 리뷰 해드립니다.
자세한 문의는
이메일 : [email protected]
사이트(방명록) : http://rebehayan.com
– 사이트안내 –
* 개인사이트 : http://rebehayan.com
* 개인블로그 : http://blog.naver.com/rebehayan
* 장애인차별금지법 대응을 위한 웹접근성과 품질인증 저자 : http://www.acornpub.co.kr/book/beyond-web-accessibility
말줄임표 css 주제에 대한 자세한 내용은 여기를 참조하세요.
CSS에서 텍스트 ellipsis(‘…’) 말줄임 표시 처리하는 방법 (2줄, 3줄)
CSS로 말줄임 처리를 하기 위해서 글자를 출력할 공간이 필요합니다. 기본적으로 CSS display 속성의 inlline 값은 요소의 너비를 가질 수 없기 …
Source: webruden.tistory.com
Date Published: 1/27/2021
View: 1224
[HTML/CSS] 말줄임 표시 하는 방법: 1줄, 2줄 예제 | Deeplify
위와 같이 긴 문장이 정해진 영역을 넘어갈 경우, 어떻게 말줄임표( … )를 사용하여 생략할 수 있을까요? css 말줄임 속성: text-overflow. text- …
Source: deeplify.dev
Date Published: 5/1/2022
View: 6684
CSS ellipsis 말줄임 처리하기 – velog
Lorem ipsum dolor sit amet ➔ Lorem ipsum dol…글 등록, 댓글 등의 기능 구현할 때생각보다 꽤 자주 사용하게 되었던 CSS 속성 중 하나인, …
Source: velog.io
Date Published: 7/14/2022
View: 4654
CSS 말줄임 처리하기 – 천재작곡가의 작업실
뷰 단계에서 글자가 넘어갈경우 말줄임표를 처리하는 방법을 찾아보았습니다. CSS 작성. text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; …
Source: blog.tjsrms.me
Date Published: 10/19/2021
View: 6654
[css] 말줄임 표시(ft. text-overflow: ellipsis, 반응형)
[css] 말줄임 표시(ft. text-overflow: ellipsis, 반응형). by 코딩하는 갓디노 2021. 1. 21. 스타일링을 할때 ellipsis에 대해 정리해 보도록 하겠습니다.Source: goddino.tistory.com
Date Published: 5/13/2021
View: 7457
css 말줄임 표시( text-overflow line-clamp) – UsingU
말줄임 으로 처리합니다. 서버스크립트 쪽에서 몇 글자 이내로 내용을 잘라서 가져오기도 하지만 CSS의 text-overflow, -webkit-line-clamp 속성을 이용해 …
Source: usingu.co.kr
Date Published: 9/20/2022
View: 1900
[html/css] 글자수 넘어가면 말줄임표 / 원하는 만큼의 줄만 …
[html/css] 글자수 넘어가면 말줄임표 / 원하는 만큼의 줄만 보이게 하기. kimnaa 2020. 12. 3. 21:06. 반응형. 문장을 내가 지정한 영역 밖으로 못나가게 하거나 …Source: nh0404.tistory.com
Date Published: 12/11/2022
View: 7856
[WEB] 말줄임 표시하기( text-overflow: ellipsis ) – Medium
웹에서는 이 것을 CSS를 이용하여 간단히 화면에서 처리할 수 있습니다. text-overflow 속성의 값을 ellipsis로 지정하는 것인데, 이 것이 동작하기 …
Source: medium.com
Date Published: 1/5/2021
View: 4009
게시판의 제목 또는 한줄의 말줄임표 CSS – gists · GitHub
게시판의 제목 또는 한줄의 말줄임표 CSS. GitHub Gist: instantly share code, notes, and snippets.
Source: gist.github.com
Date Published: 10/13/2021
View: 4709
CSS로 한줄, 여러줄 글 길어지면 말줄임(“…”) 표시하기
이 포스팅에서 CSS가지고 한줄, 여러줄 말줄임표시(CSS3)를 구현하는 방법과 CSS3속성이 지원되지 않는 하위 브라우저에서는 어떻게 대응해야하는지 알아 …
Source: code-study.tistory.com
Date Published: 1/30/2022
View: 3629
주제와 관련된 이미지 말줄임표 css
주제와 관련된 더 많은 사진을 참조하십시오 CSS만으로 말줄임표(점점점 찍히기) 만들기 한줄 or 두줄이상~! Pure CSS. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 말줄임표 css
- Author: 리베하얀
- Views: 조회수 1,258회
- Likes: 좋아요 49개
- Date Published: 2018. 11. 5.
- Video Url link: https://www.youtube.com/watch?v=0OwaNjZOKGA
CSS에서 텍스트 ellipsis(‘…’) 말줄임 표시 처리하는 방법 (2줄, 3줄)
728×90
반응형
CSS에서 텍스트 ellipsis(‘…’) 줄임말 처리하는 방법
서버사이드에서 데이터를 내려줄 때 강제로 텍스트를 truncate 처리한 후 내려줄 수 있지만, CSS만으로 텍스트를 원하는 단위로 자를 수 있다는 것 알고 계셨나요? 이번 포스팅에서는 CSS를 활용해서 텍스트 말줄임 처리하는 방법에 대해서 알아보도록 하겠습니다.
한 줄 단위로 텍스트 자르는 방법
CSS로 말줄임 처리를 하기 위해서 글자를 출력할 공간이 필요합니다. 기본적으로 CSS display 속성의 inlline 값은 요소의 너비를 가질 수 없기 때문에 이를 block으로 바꿔줌으로써 너비를 가질 수 있게 변경해야 합니다.
.box { display: block; }
요소에 너비가 지정되었다면 이제 텍스트는 너비를 넘어서게 되면 자동으로 줄바꿈을 하게 됩니다. 자동으로 줄바꿈되는 것을 white-space 속성을 nowrap 값으로 설정함으로써 막을 수 있습니다.
.box { display: block; white-space: nowrap; }
이제 nowrap으로 인해 넘치는 텍스트를 감추는 작업이 필요합니다. 넘치는 부분을 감추기 위해 CSS overflow 속성을 사용합니다. 해당 요소의 overflow 속성을 hidden으로 처리함으로써 넘치는 부분을 화면에서 감춥니다.
.box { display: block; white-space: nowrap; overflow: hidden; }
이제 넘치는 부분을 숨김처리 했으니 숨긴 부분에 말줄임 처리만 하면 됩니다! 텍스트의 말줄임표(…) 처리를 하기 위해서 CSS text-overflow 속성에 ellipsis 값을 넣어줍니다.
.box { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
여러 줄로 텍스트 자르는 방법
한 줄 단위로 텍스트를 자르는 방법에 대해서 알아봤으니 이제 한 줄이 아닌 여러 줄 단위로 텍스트를 자르는 방법에 대해서 알아보도록 하겠습니다. 한 줄로 텍스트를 자르기 위해서는 너비값을 설정하는 것이 중요했지만, 여러 줄 단위로 텍스트를 자르기 위해서는 요소의 높이값 설정도 중요합니다.
.box { width: 200px; /* 특정 단위로 텍스트를 자르기 위한 구문 */ white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; /* 텍스트를 자를 때 원하는 단위 ex) 3줄 */ -webkit-box-orient: vertical; overflow: hidden; }
여러 줄로 텍스트를 자를 경우 핵심은 line-clamp 속성과 box-orient 속성입니다.
display: box – 속성은 블록을 수직, 수평으로 배치하거나 역순으로 배열하거나 임의로 배치 순서를 바꿀 수 있는 속성
line-clamp: 3 – 블록 컨테이너의 콘텐츠를 지정한 줄 수만큼 제한하는 속성
box-orient: 3 – 콘텐츠를 가로 또는 세로로 배치할지 여부를 결정하는 속성
해당 CSS 값에 webkit이라는 접두어는 크로스 브라우징을 위해서 필요한 구문입니다. -webkit-과 같은 경우 구글, 사파리 브라우저에서 사용 가능한 vendor prefix입니다.
브라우저 호환성
여러 줄로 텍스트를 자르기 위해 사용한 방법을 사용할 때는 브라우저 지원 범위를 확인 후 사용하시는 것을 추천드립니다.
line-clamp, box-orient 브라우저 호환성
728×90
반응형
그리드형
[HTML/CSS] 말줄임 표시 하는 방법: 1줄, 2줄 예제
웹 페이지를 작성할 때, 디자인적인 측면에서 말줄임( … )을 사용해야 하는 경우가 많습니다. 말줄임표를 사용하면 해당 문장이 사실은 더 긴 문장이고 생략되었다라는 것을 암시해주는 역할을 합니다.
이번 글에서는 HTML/CSS를 이용하여 특정 영역에서 말줄임표를 사용하는 방법에 대해서 소개해드리도록 하겠습니다.
말줄임 표시 하는 방법
Lorem ipsum dolor sit amet -> Lorem ipsum dol…
위와 같이 긴 문장이 정해진 영역을 넘어갈 경우, 어떻게 말줄임표( … )를 사용하여 생략할 수 있을까요?
css 말줄임 속성: text-overflow
text-overflow : [ clip | ellipsis | < string > ] { 1,2 } Copy
이 속성은 overflow 속성으로 숨겨진 컨텐츠가 어떤 상태에 있는지 효과적으로 전달하기 위한 속성입니다.
이 속성만으로 컨텐츠가 영역을 넘치도록(overflow) 해주지 않습니다.
텍스트가 영역을 넘치도록 만드는 방법
위 예제에서 가장 첫 번째는 div 영역에 width 속성만 적용한 모습을 나타냅니다.
두 번째와 세 번째는 각각 white-space: no-wrap 을 적용했을 때, white-space: no-wrap 과 overflow: hidden 을 모두 적용했을 때의 모습입니다.
white-space: no-wrap 속성은 영역 내의 문장이 길 때 자동으로 다음줄로 내려가는 것을 제거합니다. overflow: hidden 속성은 영역의 넘치는 요소를 숨겨줍니다.
css 말줄임 적용 예제
위 예제의 마지막 라인을 보시면 말줄임이 적용된 것을 확인하실 수 있습니다. 어떻게 적용했는지 알아보도록 하겠습니다.
.ellipsis { width : 200px ; white-space : nowrap ; overflow : hidden ; text-overflow : ellipsis ; /* 말줄임 적용 */ } Copy
특정 영역에 위와 같이 적용해주시면 간단하게 말줄임( … )을 적용하실 수 있습니다.
css 말줄임 2줄 이상 적용하기
text-overflow 속성을 이용하여 1줄짜리 문장에 말줄임하는 방법을 적용해보았습니다. 지금부터는 2줄 이상의 문장의 끝에서 말줄임을 적용하는 방법에 대해서 알보도록 하겠습니다.
-webkit-line-clamp 속성
-webkit-line-clamp : [ none | < integer >] Copy
이 속성은 영역 내의 지정된 라인 수로만 컨텐츠 내용을 제한 하는 기능을 합니다.
이름에서 알 수 있듯이 webkit 기반의 속성을 지원하지 않는 브라우저(ex. IE)에서는 이 속성이 동작하지 않습니다.
말줄임 2줄 이상 예제
위 예제는 -webkit-line-clamp 속성을 이용하여 문장의 길이가 지정된 라인이 넘어가는 경우 말줄임 처리를 해주는 예제입니다. 어떻게 적용하는지 알아보겠습니다.
.ellipsis { width : 200px ; overflow : hidden ; text-overflow : ellipsis ; display : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : vertical ; } Copy
한줄 또는 여러줄의 문장에 대해서 말줄임을 하고 싶을 때는 원하는 영역의 속성을 위와 같이 적용해주시면 됩니다. 만약 3줄에 대한 말줄임을 적용하고 싶으면 -webkit-line-clamp: 3; 으로 적용해주시면 됩니다.
white-space: no-wrap 속성은 꼭 제거해주셔야 합니다.
여러 줄의 문장에 말줄임을 적용하는 각 속성에 대해서 자세히 알아보도록 하겠습니다.
display: -webkit-box 속성은 해당 영역을 box 형태로 관리되도록 합니다. -webkit-line-clamp 속성은 영역 내의 컨텐츠의 최대 라인수를 결정합니다. -webkit-box-orient: vertical 속성은 영역 박스의 내의 정렬을 수직으로 하도록 합니다.
css 말줄임 2줄 이상 for IE (Internet Explorer)
안타깝게도 위에서 설명드린 -webkit-line-clamp 속성은 IE에서 적용되지 않습니다.
다행이도 css 속성을 이용하여 IE에서도 2줄 이상의 문장에 말줄임을 적용하는 방법이 있습니다. IE에서는 말줄임 표시에 대한 속성이 없기 때문에 몇 가지 과정을 거쳐서 말줄임표 적용이 가능합니다.
지금부터 예제를 통해서 살펴보겠습니다.
말줄임 2줄 이상 IE 예제
위와 같이 IE에서도 css를 이용하여 말줄임표를 적용할 수 있습니다. 어떻게 적용할 수 있었는지 알아보도록 하겠습니다.
높이 설정
.mulit-line-ellipsis { overflow : hidden ; line-height : 1.2em ; max-height : 3.6em ; } Copy
긴 문장이 원하는 라인 수로 보여질 수 있도록 라인을 결정해야합니다.
위와 같은 속성을 이용하여 최대 높이를 3.6em 으로 설정하고, 한줄 당 높이를 1.2em 으로 설정하여 세 줄로 보여지도록 합니다. 또한 문장이 3줄을 넘치는 글자는 overflow 속성으로 숨겨줍니다.
라인 수는 max-height와 line-height를 통해서 변경할 수 있습니다.
말줄임 표시 만들기
.mulit-line-ellipsis :before { content : ‘…’ ; position : absolute ; right : 0 ; bottom : 0 ; } Copy
말줄임 (…) 표시를 만들기 위해서 위와 같이 before 속성을 만들어주어 영역의 제일 오른쪽 하단에 위치시킵니다.
문장 끝에 말줄임 표시를 가려줄 영역 만들기
.mulit-line-ellipsis :after { content : ” ; position : absolute ; right : 0 ; width : 1em ; height : 1em ; margin-top : 0.2em ; background : white ; /* 배경색과 동일하게 적용 */ } Copy
위와 같이 말줄임 표시 만들기만 적용하는 경우, 짧은 문장의 경우에도 말줄임 (…) 이 표시되게 됩니다. 따라서 위와 같이 보여지는 보여질 문장 끝에 말줄임을 가려줄 영역이 필요합니다.
말줄임 영역만큼 전체 영역 width 줄이기
.mulit-line-ellipsis { width : calc ( 180px – 1em ); position : relative ; margin-right : -1em ; padding-right : 1em ; } Copy
말줄임을 영역을 활용하여 표시해주었기 때문에 위 처럼 전체영역에 대한 넓이를 조절해주어야합니다.
말줄임 속성 전체 코드
.mulit-line-ellipsis { width : calc ( 180px – 1em ); overflow : hidden ; position : relative ; line-height : 1.2em ; max-height : 3.6em ; margin-right : -1em ; padding-right : 1em ; } .mulit-line-ellipsis :before { content : ‘…’ ; position : absolute ; right : 0 ; bottom : 0 ; } .mulit-line-ellipsis :after { content : ” ; position : absolute ; right : 0 ; width : 1em ; height : 1em ; margin-top : 0.2em ; background : white ; } Copy
IE에서 여러줄 말줄임 처리하는 방법은 위 속성을 원하는 영역에 넓이와 라인수 등을 고려하여 적용해주시면 됩니다.
알아두면 좋은 점
위에서 소개한 모든 css 말줄임 표시하는 방법들은 반응형 웹이나 테이블의 td, flex 영역 등에도 동일하게 적용가능 합니다.
또한 말줄임을 css로 적용하지 않고 javascript 말줄임 처리도 할수 있습니다.
하지만 이 방법은 문자열 자체를 잘라서 말줄임 표시 (…) 를 붙여주는 것입니다. 따라서 자신의 서비스에 맞는 방법을 찾아서 말줄임을 유연하게 적용하실 수 있습니다.
제 개인적인 의견으로는 자바스크립트를 통한 말줄임 표시보다는 CSS를 활용한 말줄임 표시를 적용하는게 일반적으로 좋다고 생각합니다.
참고 문서
맺음
이번 글에서는 말줄임 표시 하는 방법에 대해서 다양한 방법들을 소개해드렸습니다. 혹시 궁금하신 점이나 이상한 점이 있으시면 댓글 부탁드리겠습니다.
감사합니다.
CSS 말줄임 처리하기
CSS 말줄임 처리하기
저는 일반적으로 글자가 넘어가는 경우를 대비해서 백엔드단계에서 글자수를 특정지어서
자르는 방법을 많이 사용하였습니다.
헌데 이방법을 사용할시 영어, 숫자, 한글의 자간이 달라 일관되지 않는 모습을 보이는 경우가 많아서
뷰 단계에서 글자가 넘어갈경우 말줄임표를 처리하는 방법을 찾아보았습니다.
CSS 작성
text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100px; overflow:hidden;
text-overflow
이 속성은 글자가 지정한 너비를 넘어갈경우 어떤식으로 처리할것인지를 선택하는 속성입니다.
clip : 기본값입니다.
ellipsis : 말줄임표로 처리합니다. 상위요소의 너비가 auto로 되어있는경우 는 적용할 수 없습니다.
는 적용할 수 없습니다. inherit : 상위요소의 속성과 동일하게 사용합니다.
white-space
요소안에서 공백은 어떤식으로 처리할것인지를 선택하는 속성입니다. 공백은 줄바꿈(line-break), 들여쓰기(tab), 공백(space)입니다.
normal : 기본값입니다. 공백을 여러개 넣어도 공백을 1개로 처리합니다.
nowrap : 공백을 여러개 넣어도 1개로 처리합니다. 텍스트가 길어져도 줄바꿈을 하지않고 1줄로 표시합니다.
pre : 공백을 코드에 있는 그대로 표시합니다. 코드에 줄바꿈이 없으면 줄바꿈을 실행하지 않습니다.
pre-wrap : 공백을 코드에 있는 그대로 표시합니다. 코드에 줄바꿈이 없어도 자동으로 줄바꿈을 실행합니다.
pre-line : 공백을 여러개 넣어도 1개로 처리합니다. 코드에 줄바꿈이 없어도 자동으로 줄바꿈을 실행합니다. 코드에 줄바꿈이 있을때도 그대로 실행합니다.
word-wrap
긴 텍스트를 강제로 끊어서 줄바꿈을 해주는 속성입니다. (overflow 와 비슷합니다)
normal : 기본값입니다. 글자가 길어도 끊어지지 않고 한줄에 계속 표시
break-word : 강제로 끊어서 줄바꿈합니다.
위와 같은 방법은 텍스트를 한줄로만 표현할때 사용하는 방법입니다.
아래는 두줄이상의 텍스트일경우 말줄임 처리 방법입니다.
두줄 이상일 경우 CSS 작성
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.2em; height: 3.6em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */
-webkit-line-clamp 속성의 경우, 웹킷 엔진을 사용하지 않는 브라우져의 경우 문제가 될수 있으므로,
line-height 속성과 height 속성을 이요하여 높이를 계산하여 넣어줍니다. (height = line-height * 줄수)
아래는 실행예제입니다.
http://jsfiddle.net/JangSeongeun/10xqqwcf/
[css] 말줄임 표시(ft. text-overflow: ellipsis, 반응형)
스타일링을 할때 ellipsis에 대해
정리해 보도록 하겠습니다.
게시판 또는 카드 타입의 다이얼로그의 제목 부분이 길어질 경우,
css를 이용하여 일정 크기 이상에서는 ‘…’ 으로 정리합니다.
css 코드
한 줄로 글자 수 제한 표시 (single line)
· display: block(block레벨)에서만 적용
· text-overflow:ellipsis text가 초과할 경우 생략 부호로 표시
· white-space:nowrap : 공백 문자가 있는 경우 줄 바꿈 하지 않고 한 줄로 나오도록 처리
width:250px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
여러 줄로 글자수 제한 표시 (multi line)
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //표시 줄 수 -webkit-box-orient: vertical;
예제
한 줄로 표시
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus id eligendi expedita dolor quam corrupti commodi pariatur dolores doloribus ipsa eius modi, nemo quisquam veritatis, laborum adipisci optio, itaque, nesciunt.
몇 줄로 표시
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus id eligendi expedita dolor quam corrupti commodi pariatur dolores doloribus ipsa eius modi, nemo quisquam veritatis, laborum adipisci optio, itaque, nesciunt.
.singleLine { width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .multiLine { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
화면결과
css 말줄임 표시( text-overflow line-clamp) – CSS
사이트에 최근게시물을 표시할 때 보통 몇 글자까지만 표시하고 … 말줄임 으로 처리합니다. 서버스크립트 쪽에서 몇 글자 이내로 내용을 잘라서 가져오기도 하지만 CSS의 text-overflow, -webkit-line-clamp 속성을 이용해 말줄임 표시를 처리할 수 있습니다.
한줄 말줄임 표시하기
저 처럼 워드프레스를 사용하는 분들은 워드프레스나 위젯에서 설정을 제공 하지 않는다면 원하는 디자인을 만드는데 한계가 생기게 됩니다.
다음 그림은 Page List 위젯으로 페이지 리스트 목록을 가져온 상태입니다. 가져온 리스트 목록 중 제목을 제외한 내용은 한 줄만을 표시하고 싶은데 별도의 설정이 없어서 위젯으로는 3번 목록은 더 이상 처리 할 수 없는 상태입니다.
[그림] 워드프레스 page list 위젯으로 가져온 목록들한줄 말줄임 표시를 위한 선수 설정
CSS로 말줄임 표시를 하기 위해서는 HTML 요소가 너비를 지정할 수 있는 요소여야 합니다. 먼저 display 속성을 block 레벨로 지정합니다.
display:block;
그리고 텍스트가 넘쳐 나는 상황을 만들어 준 후 부모의 요소보다 넘칠 때는 해당 내용이 보이지 않도록 CSS를 설정합니다. 텍스트가 넘쳐 나는 상황은 자동줄 바꿈이 안되도록 white-space:nowrap 으로 설정해주고 부모보다 넘쳐나는 부분은 보이지 않도록 overflow:hidden 으로 설정합니다.
white-sapce:nowrap; overflow:hidden;
말줄임 표시 설정 text-overflow: ellipsis
텍스트가 부모의 요소보다 넘치는 상황을 만들어 주었으니 텍스트에 말줄임(…) 을 표시하는 설정을 합니다.
text-overflow: ellipsis;
한줄 말줄임 표시 CSS 코드
최종적인 CSS는 다음과 같습니다.
선택자 { display:block; white-sapce:nowrap; overflow:hidden; text-overflow: ellipsis; }
위의 CSS 설정을 하면 다음과 같이 목록의 표시가 바뀝니다.
[그림] 워드프레스 page list 위젯에 text-overflow를 적용한 목록여러줄 말줄임 표시 -webkit-line-clamp text-overflow 를 이용하여 한 줄 말줄임을 알아 보았습니다. 그런데 UI 작업을 하다보면 여러 줄 텍스트 표시 후 말줄임(…) 표시를 해야 하는 경우가 더 많이 있습니다. CSS의 line-clamp 속성을 이용하면 여러 줄 말줄임 표시를 할 수 있지만 아직까지는 (이글을 작성하는 21.12월말) 표준이 아니라서 브라우저 접두어를 사용하여 -webkit-line-clamp 로 지정하여햐 합니다. 여러 줄 말줄임 표시 사전 설정 -webkit-line-clamp 속성은 콘텐츠의 표시를 지정한 줄 수 만큼만 표시하는 속성입니다. 하지만 이 속성은 display:-webkit-box; 지정하고 -webkit-box-orient:vertical; 이 선행되어야 제대로 동작합니다. display:-webkit-box; -webkit-box-orient:vertical; 그리고 한 줄 말줄임 표시 할 때와 같이 텍스트가 부모의 요소보다 넘칠 때 보이지 않게 overflow:hidden; 설정하지 않으면 display, -webkit-box-orient 속성을 설정하여도 말줄임(…) 표시가 되지 않습니다. overflow:hidden; 여러 줄 말줄임 표시 -webkit-line-clamp:
사전 설정을 하였으면 box 컨테이너 안에서 콘텐츠를 몇 줄로 표시할지 -webkin-line-clamp 속성에 원하는 줄 수를 number값으로 지정합니다. 2줄을 표시하기 원하면 -webkit-line-clamp:2; 로 지정합니다. -webkit-line-clamp:2; 여러 줄 말줄임 CSS 코드 최종 CSS는 다음과 같습니다. 선택자 { display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:2; } 위의 CSS 설정을 하면 다음과 같이 표시됩니다. [그림] 워드프레스 page list 위젯에 -webkit-line-clamp를 적용한 목록 마무리 하며
UI 디자인 상 텍스트를 자르는 말줄임 표시는 한 줄 보다는 2~3줄로 하는 경우가 더 많이 있습니다. 그런데 -webkit-line-clamp 는 IE11 에서는 작동을 하지 않습니다. IE11는 체크브라우저에서 빨리 제거 되어야 하는데 아직도 IE11를 크로스브라우징 할 때 포함시키는 프로젝트가 있는게 현실입니다.
IE11에서말줄임 표시를 구현하기 위해서는 자바스크립트 clamp.js 를 이용하는 방법이 있습니다.
21년 12월 현재 -webkit-line-clamp 는 파이어폭스 ,사파리, 에지, 크롬에서는 구현되고 있습니다.
[html/css] 글자수 넘어가면 말줄임표 / 원하는 만큼의 줄만 보이게 하기
반응형
문장을 내가 지정한 영역 밖으로 못나가게 하거나 지정한 영역이 좁아 말줄임표를 사용해야하는 경우가 있습니다. 알라딘의 책 소개처럼 !
이러한 경우 말줌임표를 ㅁ + 한자 키로 직접 입력해도 되지만 그러면 일일이 입력해야하는 번거로울 뿐만 아니라 문장에 글자가 추가되거나 삭제될 때마다 일일이 수정해야합니다.
이럴 때 사용 가능한 속성을 text-overflow: ellipsis 와 -webkit-line-clamp: 숫자 가 있습니다.
이 둘의 사용법과 차이점은 다음과 같습니다.
html
사랑의 앞이 튼튼하며, 거친 사막이다. 청춘의 보배를 기쁘며, 날카로우나 구하지 하여도 그러므로 뿐이다. 이상 무엇을 목숨을 그들에게 천하를 능히 위하여, 그들은 듣기만 부패뿐이다. 내는 오직 실로 두손을 봄바람이다. 어디 무엇이 소금이라 있으며, 예가 기관과 인류의 뿐이다. 풀이 청춘의 지혜는 창공에 인간은 때까지 봄바람이다. 인류의 피는 주며, 자신과 쓸쓸하랴? 돋고, 그들의 것은 위하여, 그와 위하여서. 수 웅대한 설레는 피가 청춘이 피고, 것이다. 이는 이상이 구하기 생생하며, 천하를 운다. 어디 꾸며 것은 현저하게 작고 인간의 눈에 것이다. 가장 그들의 실현에 그들의 맺어, 있으랴? 실로 싶이 유소년에게서 얼음에 새 풀밭에 보라. 무엇을 위하여서 튼튼하며, 찾아 들어 우는 피가 구하기 풍부하게 것이다. 두손을 청춘의 물방아 따뜻한 쓸쓸하랴? 과실이 현저하게 몸이 청춘 이는 꽃이 피고, 것이 뭇 아니다. 오직 같으며, 인간은 곧 있는 있는 위하여서. 우리 방황하여도, 꽃이 청춘을 이것이다. 것이다.보라, 열락의 청춘이 싶이 크고 끓는다. 창공에 그들을 노년에게서 봄바람을 밝은 하여도 것이다. 얼음 착목한는 것은 있을 거선의 두기 속잎나고, 것이다.
한 줄만 보이게 하기
text-overflow: ellipsis : 한 문장에서만 사용가능
white-space : nowrap 속성으로 줄바꿈을 방지하고, 해당 너비를 넘어선 부분의 글자들을 overflow : hidden을 적용하여 숨겨줍니다.
그리고 text-overflow : ellipsis 를 적용하면 말줄임표(…)가 숨겨지는 영역의 끝 부분에 생깁니다.
여러 줄 단위로 글자 자르기
여러 줄을 보이게 하기 위해서는 white-space : nowrap 속성을 해제하여 해당 너비에 맞게 줄바꿈이 이루어지게 한 뒤, 보이게 할 글자의 줄 수만큼의 줄높이를 지정합니다.
예제에서는 한 줄 당 line-height 를 1.2로 설정하였습니다.
word-wrap : break-word; – 단어 단위로 줄바꿈
text-align : left; – 텍스트를 가운데나 오른쪽 정렬을 하게 되면 말줄임표가 이상한 곳으로 갈 수 있음
display: -webkit-box : 유연하게 height를 증감시킬 수 있는 플렉스 박스형태로 변환
-webkit-line-clamp: 3 : 보여줄 줄 수
-webkit-box-orient: vertical : 플렉스 박스의 방향 설정(가로)
.word { margin:100px; outline: 1px solid black; display: block; color: black; width: 630px; font-size: 20px; font-weight: bolder !important; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.2; /* height: 4.8em;*/ text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2 ; -webkit-box-orient: vertical; }
height를 주지 않고, -webkit-line-clamp : 2; 만 주어도 2번째 줄 까지 보여지며 2번째 줄 마지막에 말줄임표가 생성됩니다.
반대로, height 만 주고 -webkit-line-clamp를 지정하지 않은 경우, 말줄임표는 생성되지 않습니다
보통 첫 줄의 줄높이를 1.2로 설정한 경우
두번째 줄까지 보이게 하려면 1.2 x 2 = 2.4em 의 높이를 주면 됩니다.
같은 방법으로 세번째 줄까지 보이게 하려면 1.2 x 3 = 3.6em 의 높이를 주면 됩니다.
height는 4.8em으로 네번째 줄까지 보이게 하고, -webkit-line-clamp : 3; 을 주게 되면 4번째 줄 까지 보여지며 3번째 줄 마지막에 말줄임표가 생성됩니다.
반응형
게시판의 제목 또는 한줄의 말줄임표 CSS
What would you like to do?
Embed Embed this gist in your website. Share Copy sharable link for this gist. Clone via HTTPS Clone with Git or checkout with SVN using the repository’s web address.
CSS로 한줄, 여러줄 글 길어지면 말줄임(“…”) 표시하기
반응형
CSS로 한줄, 여러줄 글 길어지면 말줄임(“…”) 표시하기
웹사이트 제작시 필수로 사용되는 말줄임표시, 보통 한줄 말줄임표시만 CSS에서 처리하고 그 외 여러줄 말줄임 표시는 개발자에게 맡기거나 하는편이다. 이 포스팅에서 CSS가지고 한줄, 여러줄 말줄임표시(CSS3)를 구현하는 방법과 CSS3속성이 지원되지 않는 하위 브라우저에서는 어떻게 대응해야하는지 알아보려고 한다.
먼저 아래와 같이 HTML과 CSS 코드를 작성한다. 쉽게 볼 수 있는 최신 글 목록 UI이다.
뉴스목록
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil in vero, deleniti fugiat laudantium maiores corrupti, dolor ea, quae ad maxime inventore consequuntur? Eaque voluptatem neque, at dignissimos corrupti vitae?
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil in vero, deleniti fugiat laudantium maiores corrupti, dolor ea, quae ad maxime inventore consequuntur? Eaque voluptatem neque, at dignissimos corrupti vitae?
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil in vero, deleniti fugiat laudantium maiores corrupti, dolor ea, quae ad maxime inventore consequuntur? Eaque voluptatem neque, at dignissimos corrupti vitae?
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil in vero, deleniti fugiat laudantium maiores corrupti, dolor ea, quae ad maxime inventore consequuntur? Eaque voluptatem neque, at dignissimos corrupti vitae?
/* CSS */ .news {padding:40px; width:400px;} .news .title {margin-bottom:10px; padding-bottom:8px; font-size:18px; border-bottom:2px solid #999;} .news ul li + li {margin-top:8px;} .news ul li a {color:#444; font-size:13px; text-decoration:none;} .news ul li a:hover {text-decoration:underline;}
최신 글 목록 UI
보통 최신 글 목록에서는 제목을 한줄로 처리하니 말줄임표시를 위해 li 에 아래와같이 스타일을 추가한다.
/* CSS */ .news ul li {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
최신 글 목록 UI 한줄 말줄임 표시
이제 한줄 말줄임표시가 정상적으로 적용된걸 볼 수 있다. 아래 코드는 한줄 말줄임 표시 예제 최종 CSS 코드이다.
/* CSS : 한줄 말줄임표시 최종 코드 */ .news {padding:40px; width:400px;} .news .title {margin-bottom:10px; padding-bottom:8px; font-size:18px; border-bottom:2px solid #999;} .news ul li {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .news ul li + li {margin-top:8px;} .news ul li a {color:#444; font-size:13px; text-decoration:none;} .news ul li a:hover {text-decoration:underline;}
그럼 같은 HTML을 가지고 디자인을 변경하여 여러줄 말줄임표시를 적용해보자. HTML은 위에서 사용된 것과 동일하고 아래와 같이 CSS만 수정하였다. (하위 브라우저 지원을 위해 flex-layout 속성은 사용하지 않았다)
/* CSS */ .news {padding:40px; width:500px;} .news .title {margin-bottom:10px; padding-bottom:8px; font-size:18px; border-bottom:2px solid #999;} .news ul {zoom:1;} .news ul:after {display:block; content:””; clear:both;} .news ul li {float:left; margin-bottom:14px; padding:15px; width:48%; border:1px solid #999; box-sizing:border-box;} .news ul li:nth-child(2n) {float:right;} .news ul li a {display:block; padding:15px; line-height:18px; color:#444; font-size:13px; text-decoration:none;}
좌우로 정렬된 BOX UI
위 UI에서 글의 제목을 전부 노출하는 것이 아닌 4줄 이상은 말줄임표시 (“…”) 처리해보자. li의 a태그에 아래와 같이 속성을 추가한다.
/* CSS */ /* 여러줄 말줄임을 위해 추가된 속성, 값 display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; height:54px; */ .news ul li a {display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; line-height:18px; height:54px; color:#444; font-size:13px; text-decoration:none;}
-webkit-line-clamp속성값이 말줄임할 줄(line) 수이다. 주의점은 위 속성은 웹킷엔진을 사용하지 않는 브라우저에서는 정상적으로 노출이 안되기때문에 height값을 줘야하는데 위 예제에서는 3줄 이상 말줄임처리기 때문에 line-height값인 18px의 3배인 54px을 height값으로 주었다.
3줄 말줄임 표시가 정상 반영된 모습
정상적으로 3줄이상 말줄임표시 적용되었다. 아래 코드는 한줄 말줄임 표시 예제 최종 CSS 코드이다.
/* CSS : 여러줄 말줄임표시 최종 CSS */ .news {padding:40px; width:500px;} .news .title {margin-bottom:10px; padding-bottom:8px; font-size:18px; border-bottom:2px solid #999;} .news ul {zoom:1;} .news ul:after {display:block; content:””; clear:both;} .news ul li {float:left; margin-bottom:14px; padding:15px; width:48%; border:1px solid #999; box-sizing:border-box;} .news ul li:nth-child(2n) {float:right;} .news ul li a {display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; height:54px; line-height:18px; color:#444; font-size:13px; text-decoration:none;}
근데 위에서 작성된 여러줄 말줄임표시 코드는 아쉽게도 인터넷익스플로러(이하 IE)에서는 작동되지 않는다.
IE에서는 말줄임표시가 적용되지 않는다.
그럼 어떻게 해야할까? 아쉽지만 IE에서는 “…” 처리는 되지 않는다. 하지만 위에 적용했던 것처럼 line-height 속성 값의 숨기고 싶은 배수만큼 height를 주면 자연스럽게 숨김처리된다. 예를 들어 line-height값이 18px이고 3줄이상 숨김처리 하고싶다면 height값을 54px로 준다. IE에서 확인한 결과는 아래와 같다.
IE에서는 “…” 표시는 되지 않지만 3줄이상은 숨김처리된다.
IE 싫다.
2020/02/05 – [CSS] – 유튜브(Youtube) 영상 비율에 맞게 (반응형 사이즈)로 가져오기
2019/09/19 – [JavaScript] – lozyload, 미디어 콘텐츠 지연로딩 시키기 (feat. jQuery Lazy)
2019/08/30 – [CSS] – CSS 구글 스타일가이드 자세히보기 #intro
반응형
키워드에 대한 정보 말줄임표 css
다음은 Bing에서 말줄임표 css 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 CSS만으로 말줄임표(점점점 찍히기) 만들기 한줄 or 두줄이상~! Pure CSS
- 홈페이지
- 제작
- 웹퍼블리셔
- html5
- css3
- 강의
- 무료
- 취업
- 웹표준
- 웹접근성
- 웹호환성
- 반응형웹
- 모바일웹
- 점점점
- 말줄임표
CSS만으로 #말줄임표(점점점 #찍히기) #만들기 #한줄 #or #두줄이상~! #Pure #CSS
YouTube에서 말줄임표 css 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 CSS만으로 말줄임표(점점점 찍히기) 만들기 한줄 or 두줄이상~! Pure CSS | 말줄임표 css, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.