Skip to content

Instantly share code, notes, and snippets.

@joserick

joserick/Marquee.md

Last active February 17, 2024 01:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joserick/6f16a946fc3a715d0f00dd0aa395e002 to your computer and use it in GitHub Desktop.
Save joserick/6f16a946fc3a715d0f00dd0aa395e002 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind Css Marquee | Text-Overflow (Truncate) with Transition
Raw
Marquee.md

Marquee.gif

Demo <-- Try Tailwind Marquee (Text-Overflow "Truncate" with Transition)

<!-- Effect Marquee -->
<div class="w-72 truncate">
    <div class="inline-block w-full hover:w-auto active:w-auto">
        <div class="relative left-0 truncate text-3xl hover:left-[calc(18rem-100%)] hover:transition-[left] hover:duration-[4000ms] hover:ease-linear">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment