html:css:text

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- html:css:text [2011/12/06 20:12]
kwon37xi
+++ html:css:text [2012/05/25 12:14] (현재)
kwon37xi [여러 줄 텍스트 길이 제한]
@@ 줄 3: / 줄 3: @@
 ===== 텍스트 길이 제한 =====
-  * 넓이가 지정된 영역의 경우 텍스트 길이를 CSS로 제한할 수 있다. 서버사이드에서 자르는 방식은 가변폭 글꼴 때문에 정확하게 작동할 수 없다.
+넓이가 지정된 영역의 경우 텍스트 길이를 CSS로 제한할 수 있다. 서버사이드에서 자르는 방식은 가변폭 글꼴 때문에 정확하게 작동할 수 없다.
 <code css>
 /* 넓이가 명시된 상태 */
 width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
+</code>
+===== 여러 줄 텍스트 길이 제한 =====
+  * [[http://www.css-101.org/articles/line-clamp/line-clamp_for_non_webkit-based_browsers.php|-webkit-line-clamp를 크로스 브라우저로 구현하기]]
+  * [[http://dev.opera.com/static/dstorey/text/text-overflow.html|Opera에는 더 좋은 -o-ellipsis-lastline가 있다]]
+<code css>
+/* WebKit */
+.giveMeEllipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; /* number of lines to show */
+    -webkit-box-orient: vertical;
+}
+/* Cross Browser 3줄일 경우.*/
+    p {
+        position:relative;
+        line-height:1.4em;
+        height:4.2em;      /* 3 times the line-height to show 3 lines */
+    }
+    p::after {
+        content:"...";
+        font-weight:bold;
+        position:absolute;
+        bottom:0;
+        right:0;
+        padding:0 20px 1px 45px;
+        background:url(ellipsis_bg.png) repeat-y;
+    }
 </code>
 ===== word-break =====
   * break-all : 특수문자를 제외하고 강제 줄바꿈
-  * break-word :특수문자를 포함하고 강제 줄바꿈
+  * **break-word** : 특수문자를 포함하고 강제 줄바꿈. break-word을 사용하면 대부분의 경우 해결 될 듯.
   * nowrap : width를 지정하였지만 개행이 되지 않기를 원할때 사용.
-  * word-break:keep-all : 텍스트가 한글일 경우 띄워쓰기 기준으로 개행된다.
+  * keep-all : 텍스트가 한글일 경우 띄워쓰기 기준으로 개행된다.

html/css/text.1323169926.txt.gz · 마지막으로 수정됨: 2011/12/06 20:12 저자 kwon37xi