그누보드 QA - html css 텍스트 말줄임효과 아이폰 질문이요

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

2016.09.19 14:38:34 8778 (175.♡.♡.175)

본문

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

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


.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>

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

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

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

아이폰에서는 위 문구가

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

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

#html #css #말줄임

답변 2

진서기 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2016-09-19 15:02:50 211.♡.♡.43

.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

참고하세요