[ RESPONSIVE ] 18 게시판 (한줄/두줄 효과)

[ RESPONSIVE ] 18 게시판 (한줄/두줄 효과)

 

 

See the Pen [ RESPONSIVE ] 18 게시판 (한줄/두줄 효과) by larmong (@larmong) on CodePen.

 

 

 

 

GitHub에서 보기 Click!

 

 

---

 

 

* 게시판 글 앞에 동그라미 넣기

.notice1 li { position: relative; }

.notice1 li::before {
    content: '';
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #449ce2;
    position: absolute; left: 0; top: 6px;
}

 

* 한줄 효과

.notice1 li {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}

 

* 두줄 효과 (개발단계)

-webkit-line-clamp : 숫자에 따라 두줄 이상 가능

.notice2 li { 
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

 

 

---

 

 

* 반응형 사이트 강의 보는곳(WEBSTORYBOY) click!