CodeNote.net

jQuery textillate.js でテキストの折り返しサンプルコード

Tadashi Shigeoka ·  Sat, April 25, 2020

jQuery textillate.js でテキストの折り返しの動作確認サンプルコードをご紹介します。

jQuery textillate.js

背景 textillate.js でテキストの折り返しを扱いたい

１つ前の記事でご紹介した jQuery textillate.js で CSS3 テキストアニメーション でテキストの折り返しを扱う場合の動作確認をしたサンプルコードをご紹介します。

textillate.js テキストの折り返し サンプルコード

デモページとサンプルコードは以下にそれぞれ公開していますので、ぜひご覧ください。

デモページ

DEMO: https://codenote-net.github.io/sandbox/textillate/word-wrap.html

word-wrap: break-word | jQuery textillate.js

サンプルコード

? jQuery textillate.js でテキストの折り返し · Pull Request #7 · codenote-net/sandbox

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
    integrity="sha256-PHcOkPmOshsMBC+vtJdVr5Mwb7r0LkSVJPlPrp/IMpU=" crossorigin="anonymous" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"
    integrity="sha256-7sov0P4cWkfKMVHQ/NvnWVqcLSPYrPwxdz+MtZ+ahl8=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.min.js"
    integrity="sha256-Tvi6rQj7jAzxY1J8UaFlagR6+ZtWVctieK8pFawiY8Q=" crossorigin="anonymous"></script>

  <style>
    .break-word-area {
      width: 300px;
      word-wrap: break-word;
    }
  </style>

  <script>
    $(function () {
      $('.tlt').textillate();
    });
  </script>
</head>

<body>
  <h1 class="tlt">テキストの折返し　なしよりのなし</h1>

  <h1 class="tlt break-word-area">テキストの折返し　ありよりのあり</h1>
</body>

</html>

以上、jQuery textillate.js テキストの折り返しが有る場合と無い場合を動作確認してみた、現場からお送りしました。