texts display in multiple lines for small sized screen

Question

I have

 @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;
    }

    }


<span id="title-font" title="{{post.title}}">
          {{ post.title }}</span>

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

I want it to be like

aaaaaaaaaaaa
aaaaaaaaaaaa
aaaaaaaaaaa

Answer 1

So, as I said in the comment, you should check this link : How to force a line break in a loooooong word in a DIV?

Here's a JS Fiddle with the solution, see it here

CSS code :

 #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;
    }

  }