when screen size is medium or small or xs, the text overflows that it messes up the whole table. It works fine in full screen though

Question

For desk top version,(when life was simpler) normal page text gets displayed fine. but for tablet and mobile version text overflows. I already am using

h4#lineForUrl a:first-of-type {
  max-width:500px
  display:inline-block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

but this gets only effected in desktop size page. For my web users can post anything,and along with the post title gets displayed in the front page. When the title is too long I used the above code to stop overflow. but when I decrease the size of the screen, overflow prevented title is still too long for it. How do I achieve my goal here?

<h4 id="lineForUrl">
<a href="{% url 'post' post.slug %}" 
   target="_blank" 
   style="margin-left: 15px; text-decoration:none;"> 

  <img src="{{post.thumbnail}}"  
       class="img-rounded" 
       alt="☺" 
       height="75" 
       width="75"/>

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

Answer 1

Change the size of the font:

You can use media queries to set the stile for narrow screens;

@media screen and (min-width: 480px) {
    #lineForUrl a {
       font-size: smaller;    /* or font-size:10px;  */
    }
}

Or even easier, just use a font size relative to window (viewport-percentage lenghts) :

    #lineForUrl a {
       font-size: 0.5vw;
    }