css 공부 : 텍스트 ".." 처리
텍스트 "..." 하기
css 속성 text-overflow
속성값 ellipsis
으로 텍스트를 생략합니다.
<p>
텍스트 흘려 넘치면 ... 생략시켜주는 코드
</p>
p {
width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
코드설명
width: 500px
가로사이즈를 정하면 500px
안에서 줄바꿈이 됩니다. 텍스트가 한 줄로 생략되서 나타나게 해주기 위해 텍스트를 다시 줄바꿈 하지 않도록 white-space: nowrap;
작성하면 500px
안에 있는 텍스트가 줄바꿈이 되지않고 한줄로 나타납니다. 500px
안에서 생략되서 나타나게 해줘야 하기 때문에 overflow:hidden;
으로 잘라버립니다. 잘라내면 500px
안에서만 텍스트가 보입니다. 텍스트를 생략하기 위해 text-overflow:ellipsis;
사용합니다.
Author And Source
이 문제에 관하여(css 공부 : 텍스트 ".." 처리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@korea_webclass/css-ellipsis저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)