Notice
Recent Posts
Recent Comments
Tags more
«   2026/02   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[CSS] 말줄임표 적용하기 본문

웹퍼블리싱/CSS

[CSS] 말줄임표 적용하기

웹개발자 워니 2020. 7. 18. 05:37

width 폭을 넘어서는 긴 제목글을 폭에 따라 자동으로 말줄임표를 넣어주는 깔끔한 소스이다.

 

1
2
3
4
5
6
7
8
9
10
11
12
<style>
a.ell {
    display: block;
    text-decoration: none;
    color: #333;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; 
}
<style>
 
<a href="#" class="ell">동해물과 백두산이 마르고 </a>
 cs

 

참고사이트 : https://velog.io/@decody/Text-truncation-with-only-CSS

'웹퍼블리싱 > CSS' 카테고리의 다른 글

[CSS] 네비게이션 메뉴바 예제  (0) 2021.02.08
[css] 중앙정렬 3가지 방법  (0) 2020.09.03
[CSS] 배경이미지 프린트할 때 나오게 하는 방법  (0) 2020.07.15
[css] ccs 만으로 만드는 간단한 모달창 띄우기  (0) 2020.05.17
[css] 반응형웹상의 이미지 크기 자동지정 (꽉채우기)  (0) 2020.05.15
'웹퍼블리싱/CSS' Related Articles more
Comments