当屏幕大小为中或小或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 screen and (min-width: 480px) {
    #lineForUrl a {
       font-size: smaller;    /* or font-size:10px;  */
    }
}

或者更简单，只需使用相对于窗口的字体大小（视口百分比长度）：

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