Intro
UI에 데이터 목록을 표시하던 도중 글자수가 긴 컬럼에 대해 '...' 처리(tooltip)를 해야 했다.
한줄라인 글자 수 제한
<div class="txt_line">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다</div> .txt_line {
width:70px;
padding:0 5px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}- Block레벨 테그에서만 적용됨.
- overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는 보이지 않게 처리함
- text-overflow:ellipsis : 글자가 넓이 70px를 넘을 경우 생략부호를 표시함
- white-space:nowrap : 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 (\A로 줄바꿈가능)
멀티라인 글자수 제한
<p class="txt_post">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다. 비도 추적추적 내리고 일정상 늦으막해서 그런지 사람이 많지는 않았다. 덕분에 보통때는 한참을 기다려야 겨우 날개달린 사진을 찍을 수 있었을 텐데, 이번에는 바로 천사날개를 달고 사진을 찍을 수 있는 행운까지 얻었다. 이번이 동피랑 벽화마을 방문 3번째인데 예전에 왔을때에 비해서 벽화가 많이 바뀌어 있었다</p> .txt_post {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap:break-word;
line-height: 1.2em;
height: 3.6em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */
}화면
다음과 같이 고정된 글자 넓이를 넘어설 경우 내용이 보이지 않게 처리할 수 있다.
jQuery 사용
$(function() {
$(document).tooltip();
});
문서내의 모든 title 속성에 기본 tooltip 을 적용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<title>Document</title>
<style>
.txt_line {
width:70px;
padding:0 5px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.txt_post {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap:break-word;
line-height: 1.2em;
height: 3.6em; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */
}
</style>
<script type="text/javascript">
$(function() {
$(document).tooltip();
});
</script>
</head>
<body>
<h1>CSS에서 tooltip을 구현하는 방법💘</h1>
<div class="txt_line" title="멋찐 개발자">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다</div>
<p class="txt_post" title="멋찐 개발자2">통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다. 비도 추적추적 내리고 일정상 늦으막해서 그런지 사람이 많지는 않았다. 덕분에 보통때는 한참을 기다려야 겨우 날개달린 사진을 찍을 수 있었을 텐데, 이번에는 바로 천사날개를 달고 사진을 찍을 수 있는 행운까지 얻었다. 이번이 동피랑 벽화마을 방문 3번째인데 예전에 왔을때에 비해서 벽화가 많이 바뀌어 있었다</p>
</body>
</html>https://junistory.blogspot.com/2017/06/css-ellipsis.html
https://jqueryui.com/tooltip/
https://offbyone.tistory.com/3
Step by step goes a long way ✨