현재 위치

홈 ›› Forums ›› 공부 ›› 프로그래밍 QnA

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

googleandnaver의 이미지
글쓴이: googleandnaver / 작성시간: 토, 2018/01/13 - 2:48오후

1. 질문

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

2. 대조 스크린 샷 ![이미지][1] 빨간 동그라미 친 부분이 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에서는 그러지 않고 훨씬 많이 글이 튀어나오니 고민입니다.

Forums: 
프로그래밍 QnA
김정균의 이미지

글쓴이: 김정균 / 작성시간: 토, 2018/01/13 - 3:51오후

https://codepen.io/siiron/pen/jfBhy 참고해 보세요.

-webkit-line-clamp 는 이름만 봐도 딱 느낌이 오지 않나요? webkit engine 에서만 지원한다는 의미죠. mozilla 계열에서는 -moz prefix를 사용합니다. 다만 line-clamp 는 webkit 전용이라 위의 URL 참고 하셔서 적용 하셔야 합니다.

googleandnaver의 이미지

글쓴이: googleandnaver / 작성시간: 토, 2018/01/13 - 5:52오후

답변 감사드립니다. 알려주신 codepen.io 를 참고하여 보았는데요, 아래의 code를 참고하면 되는 것 같아 보이더라구요.

.line-clamp
{
    display            : block;
    display            : -webkit-box;
    -webkit-box-orient : vertical;
    position           : relative;
 
    line-height        : 1.2;
    overflow           : hidden;
    text-overflow      : ellipsis;
    padding            : 0 !important;
}

이 code를 css에 webkit-line-clamp를 대체하여 입력하면 되는 건가요?

제가 아직 초보라서요... 기초적인 질문을 여쭈어 보는 거라면 죄송합니다!

김정균의 이미지

글쓴이: 김정균 / 작성시간: 일, 2018/01/14 - 11:53오후

아래와 같이 를 정의 하시고

.line-clamp
{
	display            : block;
	display            : -webkit-box;
	-webkit-box-orient : vertical;
	position           : relative;
 
	line-height        : 1.2;
	overflow           : hidden;
	text-overflow      : ellipsis;
	padding            : 0 !important;
}
.line-clamp:after
{
	content    : '...';
	text-align : right;
	bottom     : 0;
	right      : 0;
	width      : 25%;
	display    : block;
	position   : absolute;
	height     : calc(1em * 1.2);
	background : linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%);
}
@supports (-webkit-line-clamp: 1)
{
	.line-clamp:after
	{
		display : none !important;
	}
}
 
.line-clamp-5
{
	-webkit-line-clamp : 5;
	height             : calc(1em * 1.2 * 5);
}

.idx_content 를 호출 하실 때 .line-clamp-5 를 같이 호출 하면 될 것 같은데요.

<div class="idx_content line-clamp line-clamp-5">
blah blah
</div>

댓글 달기

텍스트 포맷에 대한 자세한 정보

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.