Wraptastic.js

Appearance

On this page

Demos ​

This page gives a preview of some ways you can use Wraptastic.js.

Default setup ​

Start demo

    Code ​

    html
    <ul class="wraptastic"></ul>

<script>
  const wraptastic = new Wraptastic({
    data: [
      "Apple",
      "Banana",
      "Orange",
      "Mango",
      "Pineapple",
      "Watermelon",
      "Strawberry",
      "Kiwi",
      "Grapefruit",
      "Blueberry",
    ],
  });
</script>
    html
    <ul
  class="wraptastic"
  data-wraptastic-data='["Apple", "Banana", "Orange", "Mango", "Pineapple", "Watermelon", "Strawberry", "Kiwi", "Grapefruit", "Blueberry"]'
></ul>

<script>
  const wraptastic = new Wraptastic();
</script>
    html
    <ul class="wraptastic">
  <li class="wraptastic-item">Apple</li>
  <li class="wraptastic-item">Banana</li>
  <li class="wraptastic-item">Orange</li>
  <li class="wraptastic-item">Mango</li>
  <li class="wraptastic-item">Pineapple</li>
  <li class="wraptastic-item">Watermelon</li>
  <li class="wraptastic-item">Strawberry</li>
  <li class="wraptastic-item">Kiwi</li>
  <li class="wraptastic-item">Grapefruit</li>
  <li class="wraptastic-item">Blueberry</li>
</ul>

<script>
  const wraptastic = new Wraptastic();
</script>

    Two lines ​

    Start demo

      Code ​

      html
      <ul class="wraptastic"></ul>

<script>
  const wraptastic = new Wraptastic({
    data: [
      "Apple",
      "Banana",
      "Orange",
      "Mango",
      "Pineapple",
      "Watermelon",
      "Strawberry",
      "Kiwi",
      "Grapefruit",
      "Blueberry",
    ],
    maxLines: 2,
  });
</script>
      html
      <ul
  class="wraptastic"
  data-wraptastic-data='["Apple", "Banana", "Orange", "Mango", "Pineapple", "Watermelon", "Strawberry", "Kiwi", "Grapefruit", "Blueberry"]'
  data-wraptastic-max-lines="2"
></ul>

<script>
  const wraptastic = new Wraptastic();
</script>
      html
      <ul class="wraptastic">
  <li class="wraptastic-item">Apple</li>
  <li class="wraptastic-item">Banana</li>
  <li class="wraptastic-item">Orange</li>
  <li class="wraptastic-item">Mango</li>
  <li class="wraptastic-item">Pineapple</li>
  <li class="wraptastic-item">Watermelon</li>
  <li class="wraptastic-item">Strawberry</li>
  <li class="wraptastic-item">Kiwi</li>
  <li class="wraptastic-item">Grapefruit</li>
  <li class="wraptastic-item">Blueberry</li>
</ul>

<script>
  const wraptastic = new Wraptastic({
    maxLines: 2,
  });
</script>

      Three lines ​

      Start demo

        Code ​

        html
        <ul class="wraptastic"></ul>

<script>
  const wraptastic = new Wraptastic({
    data: [
      "Apple",
      "Banana",
      "Orange",
      "Mango",
      "Pineapple",
      "Watermelon",
      "Strawberry",
      "Kiwi",
      "Grapefruit",
      "Blueberry",
    ],
    maxLines: 3,
  });
</script>
        html
        <ul
  class="wraptastic"
  data-wraptastic-data='["Apple", "Banana", "Orange", "Mango", "Pineapple", "Watermelon", "Strawberry", "Kiwi", "Grapefruit", "Blueberry"]'
  data-wraptastic-max-lines="3"
></ul>

<script>
  const wraptastic = new Wraptastic();
</script>
        html
        <ul class="wraptastic">
  <li class="wraptastic-item">Apple</li>
  <li class="wraptastic-item">Banana</li>
  <li class="wraptastic-item">Orange</li>
  <li class="wraptastic-item">Mango</li>
  <li class="wraptastic-item">Pineapple</li>
  <li class="wraptastic-item">Watermelon</li>
  <li class="wraptastic-item">Strawberry</li>
  <li class="wraptastic-item">Kiwi</li>
  <li class="wraptastic-item">Grapefruit</li>
  <li class="wraptastic-item">Blueberry</li>
</ul>

<script>
  const wraptastic = new Wraptastic({
    maxLines: 3,
  });
</script>

        Counter template ​

        Start demo

          Code ​

          html
          <ul class="wraptastic"></ul>

<script>
  const wraptastic = new Wraptastic({
    data: [
      "Apple",
      "Banana",
      "Orange",
      "Mango",
      "Pineapple",
      "Watermelon",
      "Strawberry",
      "Kiwi",
      "Grapefruit",
      "Blueberry",
    ],
    counterTemplate: (count) => {
      return `${count} more items`;
    },
  });
</script>
          html
          <ul
  class="wraptastic"
  data-wraptastic-data='["Apple", "Banana", "Orange", "Mango", "Pineapple", "Watermelon", "Strawberry", "Kiwi", "Grapefruit", "Blueberry"]'
  data-wraptastic-counter-template="{count} more items"
></ul>

<script>
  const wraptastic = new Wraptastic();
</script>
          html
          <ul class="wraptastic">
  <li class="wraptastic-item">Apple</li>
  <li class="wraptastic-item">Banana</li>
  <li class="wraptastic-item">Orange</li>
  <li class="wraptastic-item">Mango</li>
  <li class="wraptastic-item">Pineapple</li>
  <li class="wraptastic-item">Watermelon</li>
  <li class="wraptastic-item">Strawberry</li>
  <li class="wraptastic-item">Kiwi</li>
  <li class="wraptastic-item">Grapefruit</li>
  <li class="wraptastic-item">Blueberry</li>
</ul>

<script>
  const wraptastic = new Wraptastic({
    counterTemplate: (count) => {
      return `${count} more items`;
    },
  });
</script>

          No counter ​

          Start demo

            Code ​

            html
            <ul class="wraptastic"></ul>

<script>
  const wraptastic = new Wraptastic({
    data: [
      "Apple",
      "Banana",
      "Orange",
      "Mango",
      "Pineapple",
      "Watermelon",
      "Strawberry",
      "Kiwi",
      "Grapefruit",
      "Blueberry",
    ],
    counterEnabled: false,
  });
</script>
            html
            <ul
  class="wraptastic"
  data-wraptastic-data='["Apple", "Banana", "Orange", "Mango", "Pineapple", "Watermelon", "Strawberry", "Kiwi", "Grapefruit", "Blueberry"]'
  data-wraptastic-counter-enabled="false"
></ul>

<script>
  const wraptastic = new Wraptastic();
</script>
            html
            <ul class="wraptastic">
  <li class="wraptastic-item">Apple</li>
  <li class="wraptastic-item">Banana</li>
  <li class="wraptastic-item">Orange</li>
  <li class="wraptastic-item">Mango</li>
  <li class="wraptastic-item">Pineapple</li>
  <li class="wraptastic-item">Watermelon</li>
  <li class="wraptastic-item">Strawberry</li>
  <li class="wraptastic-item">Kiwi</li>
  <li class="wraptastic-item">Grapefruit</li>
  <li class="wraptastic-item">Blueberry</li>
</ul>

<script>
  const wraptastic = new Wraptastic({
    counterEnabled: false,
  });
</script>

            Vertical list ​

            Start demo

              Code ​

              html
              <ul class="wraptastic" style="display: flex; flex-direction: column;"></ul>

<script>
  const wraptastic = new Wraptastic({
    data: [
      "Apple",
      "Banana",
      "Orange",
      "Mango",
      "Pineapple",
      "Watermelon",
      "Strawberry",
      "Kiwi",
      "Grapefruit",
      "Blueberry",
    ],
    maxLines: 6,
  });
</script>
              html
              <ul
  class="wraptastic"
  style="display: flex; flex-direction: column;"
  data-wraptastic-data='["Apple", "Banana", "Orange", "Mango", "Pineapple", "Watermelon", "Strawberry", "Kiwi", "Grapefruit", "Blueberry"]'
  data-wraptastic-max-lines="6"
></ul>

<script>
  const wraptastic = new Wraptastic();
</script>
              html
              <ul class="wraptastic" style="display: flex; flex-direction: column;">
  <li class="wraptastic-item">Apple</li>
  <li class="wraptastic-item">Banana</li>
  <li class="wraptastic-item">Orange</li>
  <li class="wraptastic-item">Mango</li>
  <li class="wraptastic-item">Pineapple</li>
  <li class="wraptastic-item">Watermelon</li>
  <li class="wraptastic-item">Strawberry</li>
  <li class="wraptastic-item">Kiwi</li>
  <li class="wraptastic-item">Grapefruit</li>
  <li class="wraptastic-item">Blueberry</li>
</ul>

<script>
  const wraptastic = new Wraptastic({
    maxLines: 6,
  });
</script>

              Released under the MIT License.