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:hiddenandwhite-space:nowrapset.
http://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working
참고하세요
답변감사합니다 ㅠㅠ 그런데 저소스로 적용을하면 아에 2줄이되어서 다른 영역을 침범해버리네요 ㅠㅠ
block 요소에 width 가 지정되어 있어야 하며 white-space : nowrap 이 없으면 말줄임 표시가 나타나지 않습니다.
overflow:hidden; 또한 필수입니다.
이 기준에 맞게 소스를 다시 작성해 보세요
답변을 작성하시기 전에 로그인 해주세요.
