devlights/ellipsis.html

## ellipsis.html
<html>
  <head>
    <meta charset="utf-8">
    <title>3点リーダー</title>
  </head>
  <body>
    <div id="container">
      <span>日本語での文字列１文字列２</span>
    </div>
    <style scoped>
      #container {
        margin-top: 10em;
        margin-left: auto;
        margin-right: auto;
        width: 10em;
        height: auto;
        border: thin solid #000;
        font-size: large;
        /* 以下の3つを指定しないと3点リーダーにならない */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
      $(function() {
        var $span = $("#container span");
        $span.attr("title", $span.text());
      });
    </script>
  </body>
</html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>3点リーダー</title>
	</head>
	<body>
	<div id="container">
	<span>日本語での文字列１文字列２</span>
	</div>
	<style scoped>
	#container {
	margin-top: 10em;
	margin-left: auto;
	margin-right: auto;
	width: 10em;
	height: auto;
	border: thin solid #000;
	font-size: large;
	/* 以下の3つを指定しないと3点リーダーにならない */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	</style>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script>
	$(function() {
	var $span = $("#container span");
	$span.attr("title", $span.text());
	});
	</script>
	</body>
	</html>