Chrome, Whale 브라우저에서는 잘 보이는데, IE, Edge, Firefox에서는 이상하게 보입니다.


1. 질문

제 티스토리 블로그( http://mysnowbear.tistory.com )의 메인 화면이 크롬, 네이버 웨일 브라우저에서는 잘 보이는 반면, Internet explorer 11, Edge, Moizla firefox에서는 잘 보이지 않는데요, 원인과 해결책을 여쭈어 보고 싶습니다.

2. 대조 스크린 샷 이미지 빨간 동그라미 친 부분이 IE, Edge, Firefox로 제 블로그를 볼 때 문제가 되는 부분입니다. 정해진 div의 크기를 넘어서 content의 글이 튀어나와 밑 부분까지 침범해버립니다.

3. 코딩

.idx_content{font-size:11.1pt;color:#777;-webkit-line-clamp:5}

이 부분이 사진에서 빨간친 동그라미와 관련되어 있는 부분입니다. 보시다시피 Chrome, Whale에서는 코딩의 -webkit-line-clamp:5 처럼 5줄만 나오는데, IE, Edge, firefox에서는 그러지 않고 훨씬 많이 글이 튀어나오니 고민입니다.

제 블로그 http://mysnowbear.tistory.com 의 메인페이지에서 발생하고 있는 문제이니 방문하시어 꼭 좀 도움주시면 감사하겠습니다

  • 2018년 01월 13일에 작성됨

조회수 54


1 답변


css 속성중 webkit-line-clamp 을 보니 웹킷 엔진에서만 허용되는 값 같아서 검색해보니 역시나 다른 분이 설명을 올려두었네요

http://tobyyun.tumblr.com/post/55858430437/css%EB%A5%BC-%ED%86%B5%ED%95%9C-%EB%A9%80%ED%8B%B0%EB%9D%BC%EC%9D%B8-%EB%A7%90%EC%A4%84%EC%9E%84-%EC%B2%98%EB%A6%AC%EC%99%80-%ED%8F%B4%EB%B0%B1

상기의 링크를 확인해보세요.

  • 2018년 01월 13일에 작성됨

  • 감사합니다. 보내주신 URL 을 참고하여 line-height 값을 정하려 그랬는데 얼마나 정해야 할지 몰라서 현재 애를 먹고 있네요...https://github.com/jjenzz/jquery.ellipsis jquery를 이용해서도 해결해보려 하지만 어렵습니다 하하... ㅠㅠ     박지누   2018.1.14 12:53     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close