javascript - 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 -

for desk top version,(when life simpler) normal page text gets displayed fine. tablet , mobile version text overflows. using

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

but gets effected in desktop size page. web users can post anything,and along post title gets displayed in front page. when title long used above code stop overflow. when decrease size of screen, overflow prevented title still long it. how achieve 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> 

change size of font:

you can use media queries set stile narrow screens;

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

or easier, use font size relative window (viewport-percentage lenghts):

    #lineforurl {        font-size: 0.5vw;     }