티스토리 뷰
728x90
반응형
안녕하세요 찐망고 입니다.
css로 줄임말 만드는 포스팅을 했던것 같은데 글이 없어서 포스팅을 시작해봅니다.
때마침 한줄 줄임말과, 여러줄 줄임말이 딱 보이는 예제를 해서 😊
css 한줄 주석
/* 한줄주석 */
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- overflow: hidden; 적용시 width값은 필수
- white-space: nowrap; 이용하여 해당 텍스트들이 한줄로 나오게 처리
- text-overflow: ellipsis; 말줄임표시
css 여러줄 주석
/* 세줄 주석 */
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
/* 제목요소가 한글인 경우 */
word-break: keep-all;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
- word-break를 이용하여 단어 줄바꿈
- -webkit-line-clamp의 값을 통해 줄수를 변경
word-break 관련 좋은 포스팅이 있어 공유합니다
-webkit-관련 좋은 포스팅이 있어 같이 공유합니다
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
CSS Grid Container 속성 (0) | 2024.02.02 |
---|---|
CSS로 그라디언트 테두리 버튼 디자인하기 (1) | 2024.01.24 |
CSS Grid Layout-2 (1) | 2024.01.02 |
CSS Grid Layout-1 (0) | 2023.12.29 |
스크롤 바 css로 커스텀 (0) | 2023.10.06 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- margin
- 웹표준
- 슬라이드플러그인
- 시멘틱마크업
- 자바스크립트숫자카운트
- padding
- CSS3
- JavaScript
- 크로스브라우징
- uidesign
- 포토샵합성
- boxmodel
- 스마트폰해상도
- css4
- UI디자인
- JavaScriptTips
- 프로그래밍기초
- Border
- 코딩교육
- css그리드
- 웹디자인
- Slick
- slickAPI
- uxdesign
- 반응형웹
- 웹접근성
- 디자인팁
- uiux
- css
- 피그마플러그인
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 | 30 | 31 |
글 보관함