html css 텍스트 말줄임효과 아이폰 질문이요

html css 텍스트 말줄임효과 아이폰 질문이요

QA

html css 텍스트 말줄임효과 아이폰 질문이요

본문

지금 모바일쪽 페이지를 코딩중인데

말줄임 효과를 넣어야해서 여기저기 찾다가 

 


.target {-webkit-line-clamp:1; -webkit-box-orient:vertical; display:-webkit-box; text-overflow:ellipsis; overflow:hidden; height:20px;} 
<ul>
<li class="target"><a href="#">대한민국 대출금리 최저금리는 몇%? 가나다라마바사아자차카타파하</a></li></ul> 

 

을 찾았는데 이게 안드로이드나 웹브라우저에서는

대한민국 대출금리 최저금리는 몇%? 가나다라마바사... 

로 정상적으로실행이 되는데

아이폰에서는 위 문구가

대한민국 대출금리 최저금리는 몇%? ...타파하  << 이렇게 뒤에말이 살고 앞에가 죽는거로 실행이되요  

이거 어떻게 잡아야 할까요?ㅠㅠ

 

 

이 질문에 댓글 쓰기 :

답변 2

.target a{

overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display: inline-block; 

}

 

이렇게 해보세요

text-overflow:ellipsis; only works when the following are true:

  • The element's width must be constrained in px (pixels). Width in % (percentage) won't work.
  • The element must have overflow:hidden and white-space:nowrap set.

http://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working

 

참고하세요 

block 요소에 width 가 지정되어 있어야 하며 white-space : nowrap 이 없으면 말줄임 표시가 나타나지 않습니다.

overflow:hidden; 또한 필수입니다.

 

이 기준에 맞게 소스를 다시 작성해 보세요 

답변을 작성하시기 전에 로그인 해주세요.
전체 3

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT