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