<a class="link a1" href="https://www.sitepoint.com/community/t/auto-line-wrap-of-long-lines-creates-space-gap-despite-very-small-line-height/454925">THISISSOMEUNBROKENTEXTTHATWILLWRAPTIANOTHERLINETHISISSOMEUNBROKENTEXTTHATWILLWRAPTIANOTHERLINETHISISSOMEUNBROKENTEXTTHATWILLWRAPTIANOTHERLINETHISISSOMEUNBROKENTEXTTHATWILLWRAPTIANOTHERLINE
</a>
<hr>
<a class="link a2" href="https://www.sitepoint.com/community/t/auto-line-wrap-of-long-lines-creates-space-gap-despite-very-small-line-height/454925">THISISSOMEUNBROKENTEXTTHATWILLWRAPTIANOTHERLINETHISISSOMEUNBROKENTEXTTHATWILLWRAPTIANOTHERLINETHISISSOMEUNBROKENTEXTTHATWILLWRAPTIANOTHERLINETHISISSOMEUNBROKENTEXTTHATWILLWRAPTIANOTHERLINE
</a>

<hr>

<a class="link a3" href="https://www.sitepoint.com/community/t/auto-line-wrap-of-long-lines-creates-space-gap-despite-very-small-line-height/454925">ThisIsSomeUnbrokenTextThatWillWrapToAnotherLineThisIsSomeUnbrokenTextThatWillWrapToAnotherLineThisIsSomeUnbrokenTextThatWillWrapToAnotherLineThisIsSomeUnbrokenTextThatWillWrapToAnotherLineThisIsSomeUnbrokenTextThatWillWrapToAnotherLineThisIsSomeUnbrokenTextThatWillWrapToAnotherLineThisIsSomeUnbrokenTextThatWillWrapToAnotherLineThisIsSomeUnbrokenTextThatWillWrapToAnotherLine
</a>
.link {
  display: flex;
  line-height: 1;
  width: 20em;
  overflow-wrap: anywhere;
  text-decoration: none;
  animation: lineheight 20s infinite;
}
.a2 {
  text-transform: lowercase;
}
@keyframes lineheight {
  50% {
    line-height: 0;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.