devlights
4/3/2013 - 1:37 AM

htmlとjavascriptで3点リーダー表示 (text-overflow: ellipsis)

htmlとjavascriptで3点リーダー表示 (text-overflow: ellipsis)

<html>
  <head>
    <meta charset="utf-8">
    <title>3点リーダー</title>
  </head>
  <body>
    <div id="container">
      <span>日本語での文字列1文字列2</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>