javascript - 当屏幕尺寸为 medium 或 small 或 xs 时，文本溢出会弄乱整个表格。它在全屏下工作正常

Question

对于桌面版本，(当生活更简单时)正常的页面文本可以正常显示。但对于平板电脑和移动版本，文本会溢出。我已经在用了

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

但这只在桌面大小的页面上有效。因为我的网络用户可以发布任何内容，并且随着帖子标题一起显示在首页。当标题太长时，我使用上面的代码来阻止溢出。但是当我减小屏幕大小时，防止溢出的标题对它来说仍然太长。我如何在这里实现我的目标？

<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

改变字体大小:

您可以使用 media queries为窄屏幕设置阶梯；

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

或者更简单，只使用相对于窗口的字体大小 (viewport-percentage lenghts) :

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