Skip to main content

Fix Cut Off Text When Using SplitText

Text Animation
Utility
CSS
  • Add this CSS to an embed on your page
  • Give your animated text element a class of u-split-fix
  • Adjust the top, right, bottom, and left offset amount based on your font so nothing gets cut
<style>
.u-split-fix div[style*="overflow: clip;"] {
  --offset-top: 1em;
  --offset-right: 1em;
  --offset-bottom: 1em;
  --offset-left: 1em;
  overflow: visible !important;
  clip-path: polygon(
    calc(0% - var(--offset-left)) calc(0% - var(--offset-top)),
    calc(100% + var(--offset-right)) calc(0% - var(--offset-top)),
    calc(100% + var(--offset-right)) calc(100% + var(--offset-bottom)),
    calc(0% - var(--offset-left)) calc(100% + var(--offset-bottom))
  );
}
</style>
Preview Links
Designer
Designer
CMS
CMS
Published
Published
Custom JS
Enable custom code in preview or view on published site.
Enable custom code?
Last Updated: Nov 11, 2025
  • Add this CSS to an embed on your page
  • Give your animated text element a class of u-split-fix
  • Adjust the top, right, bottom, and left offset amount based on your font so nothing gets cut
<style>
.u-split-fix div[style*="overflow: clip;"] {
  --offset-top: 1em;
  --offset-right: 1em;
  --offset-bottom: 1em;
  --offset-left: 1em;
  overflow: visible !important;
  clip-path: polygon(
    calc(0% - var(--offset-left)) calc(0% - var(--offset-top)),
    calc(100% + var(--offset-right)) calc(0% - var(--offset-top)),
    calc(100% + var(--offset-right)) calc(100% + var(--offset-bottom)),
    calc(0% - var(--offset-left)) calc(100% + var(--offset-bottom))
  );
}
</style>