当屏幕大小为中，小或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;
    }