texts display in multiple lines for small sized screen
<p>I have</p>

<pre><code> @media screen and (max-width: 480px) {

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

    }


&lt;span id="title-font" title="{{post.title}}"&gt;
          {{ post.title }}&lt;/span&gt;
</code></pre>

<p>When it's in small devices I want the words to be in multiple lines.
I tried <code>overflow;scroll</code>. </p>

<p>I want it to be like </p>

<pre><code>aaaaaaaaaaaa
aaaaaaaaaaaa
aaaaaaaaaaa
</code></pre>