Text Wrapping Sample Code with jQuery textillate.js

I’ll introduce sample code for testing text wrapping behavior with jQuery textillate.js.

Background: Want to handle text wrapping with textillate.js

I’ll introduce sample code for testing text wrapping behavior with the jQuery textillate.js CSS3 text animations introduced in the previous article.

textillate.js Text Wrapping Sample Code

The demo page and sample code are available at the following locations, so please check them out:

Demo Page

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

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

Sample Code

? Text wrapping with 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>

That’s all from the Gemba, where I tested jQuery textillate.js behavior with and without text wrapping.