JSFiddle - React, Tailwind, and code Playground

HTML

<div id="lineForUrl">
  <a href="#">
    <span id="title-font" title="{{post.title}}">
          aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</span>
  </a>
</div>

CSS

#lineForUrl a #title-font{
   word-wrap: break-word;
 }
 
 @media screen and (max-width: 480px) {

      #footer {
        padding: 2em 1em 0.1em 1em;
      }
      #lineForUrl a #title-font {
max-width: 100%;
 overflow: visible;   
  display: inline-block;
font-size: smaller;
    }

    }