study:css

차이

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

차이 보기로 링크

--- study:css [2019/11/05 06:12] – [Ellipsis] taekgu
+++ study:css [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 25: / 줄 25: @@
 ==== Ellipsis ====
+통영의...
 <code html>
-<div class="txt_line">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다</div> .txt_line { width:70px; padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+<div class="txt_line">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다</div>
+<style>
+.txt_line {
+ width:70px;
+ padding:0 5px;
+ overflow:hidden;
+ text-overflow:ellipsis;
+ white-space:nowrap;
+}
+</style>
 </code>
-Block레벨 테그에서만 적용됨.overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는 보이지 않게 처리함text-overflow:ellipsis : 글자가 넓이 70px를 넘을 경우 생략부호를 표시함
+Block레벨 테그에서만 적용됨
+  * .overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는 보이지 않게 처리함
-white-space:nowrap : 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 (\A로 줄바꿈가능)
+  * text-overflow:ellipsis : 글자가 넓이 70px를 넘을 경우 생략부호를 표시함
+  * white-space:nowrap : 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 (\A로 줄바꿈가능)

study/css.1572934324.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)