ikaruce/index.html

## index.html
<html>
<head><title>multiline Ellipses</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script
            src="https://code.jquery.com/jquery-3.4.1.js"
            integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous"></script>
    <style>
        .container {
            padding: 10px;
            margin: 1px;
        }

        .container .multiline-ellipsis {
            height: 54px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .line-ellipsis3 {
            overflow: hidden;
        }

        .width300 {
            width: 300px;
        }

        div {
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="multiline-ellipsis width300">
        지나가는 무성할 새겨지는 애기 아침이 헤는 겨울이 피어나듯이 까닭이요, 까닭입니다. 잔디가 언덕 까닭이요, 계십니다. 내일 비둘기, 가슴속에 까닭이요, 거외다. 이런 어머니, 프랑시스 별 책상을 말 아스라히 지나고 있습니다. 다 별들을 별 나의 듯합니다. 가득 무성할 풀이 아무 지나고 버리었습니다. 경, 이름을 가을 이름을 하나의 오는 별을 하늘에는 별 까닭입니다. 위에 부끄러운 이름과, 나의 남은 이름자 지나가는 버리었습니다. 마디씩 했던 시와 써 덮어 이런 차 하나에 까닭이요, 있습니다.
    </div>
    <hr>
    <div class="line-ellipsis3 width300">
        지나가는 무성할 새겨지는 애기 아침이 헤는 겨울이 피어나듯이 까닭이요, 까닭입니다. 잔디가 언덕 까닭이요, 계십니다. 내일 비둘기, 가슴속에 까닭이요, 거외다. 이런 어머니, 프랑시스 별 책상을 말 아스라히 지나고 있습니다. 다 별들을 별 나의 듯합니다. 가득 무성할 풀이 아무 지나고 버리었습니다. 경, 이름을 가을 이름을 하나의 오는 별을 하늘에는 별 까닭입니다. 위에 부끄러운 이름과, 나의 남은 이름자 지나가는 버리었습니다. 마디씩 했던 시와 써 덮어 이런 차 하나에 까닭이요, 있습니다.
    </div>
</div>
</body>
</html>
<script>
    $(document).ready(function(){
        $('.line-ellipsis3').each(function(){
            $(this).text(omit($(this)));
        });
    });


    function omit(el) {
      let bottom_right_pad = 50;
      let clamp_line = 3;
      let omitted = "";
      let omit_width = el.width() * clamp_line - bottom_right_pad;

      console.log(omit_width);

      let origin = el.text().trim();
      console.log(origin);

      let fake = $('<span>').hide().appendTo(document.body);
      let text_width = fake.text(origin).css('font', el.css('font')).width();
      let font_width = fake.text(origin.substring(0,1)).css('font', el.css('font')).width();
      if( text_width >= omit_width) {
          let omit_length = (omit_width ) / font_width;
          omitted = origin.substring(0,  omit_length) + '...';
      }
      fake.remove();
      return omitted;
    }
</script>
	<html>
	<head><title>multiline Ellipses</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script
	src="https://code.jquery.com/jquery-3.4.1.js"
	integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
	crossorigin="anonymous"></script>
	<style>
	.container {
	padding: 10px;
	margin: 1px;
	}

	.container .multiline-ellipsis {
	height: 54px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	}

	.line-ellipsis3 {
	overflow: hidden;
	}

	.width300 {
	width: 300px;
	}

	div {
	border: 1px solid lightgray;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="multiline-ellipsis width300">
	지나가는 무성할 새겨지는 애기 아침이 헤는 겨울이 피어나듯이 까닭이요, 까닭입니다. 잔디가 언덕 까닭이요, 계십니다. 내일 비둘기, 가슴속에 까닭이요, 거외다. 이런 어머니, 프랑시스 별 책상을 말 아스라히 지나고 있습니다. 다 별들을 별 나의 듯합니다. 가득 무성할 풀이 아무 지나고 버리었습니다. 경, 이름을 가을 이름을 하나의 오는 별을 하늘에는 별 까닭입니다. 위에 부끄러운 이름과, 나의 남은 이름자 지나가는 버리었습니다. 마디씩 했던 시와 써 덮어 이런 차 하나에 까닭이요, 있습니다.
	</div>
	<hr>
	<div class="line-ellipsis3 width300">
	지나가는 무성할 새겨지는 애기 아침이 헤는 겨울이 피어나듯이 까닭이요, 까닭입니다. 잔디가 언덕 까닭이요, 계십니다. 내일 비둘기, 가슴속에 까닭이요, 거외다. 이런 어머니, 프랑시스 별 책상을 말 아스라히 지나고 있습니다. 다 별들을 별 나의 듯합니다. 가득 무성할 풀이 아무 지나고 버리었습니다. 경, 이름을 가을 이름을 하나의 오는 별을 하늘에는 별 까닭입니다. 위에 부끄러운 이름과, 나의 남은 이름자 지나가는 버리었습니다. 마디씩 했던 시와 써 덮어 이런 차 하나에 까닭이요, 있습니다.
	</div>
	</div>
	</body>
	</html>
	<script>
	$(document).ready(function(){
	$('.line-ellipsis3').each(function(){
	$(this).text(omit($(this)));
	});
	});


	function omit(el) {
	let bottom_right_pad = 50;
	let clamp_line = 3;
	let omitted = "";
	let omit_width = el.width() * clamp_line - bottom_right_pad;

	console.log(omit_width);

	let origin = el.text().trim();
	console.log(origin);

	let fake = $('<span>').hide().appendTo(document.body);
	let text_width = fake.text(origin).css('font', el.css('font')).width();
	let font_width = fake.text(origin.substring(0,1)).css('font', el.css('font')).width();
	if( text_width >= omit_width) {
	let omit_length = (omit_width ) / font_width;
	omitted = origin.substring(0, omit_length) + '...';
	}
	fake.remove();
	return omitted;
	}
	</script>