, metnin tüm tabloyu berbat ettiğini aşar.

Question

Ancak tam ekran çalışıyor, masa üstü sürümü için (hayat daha kolay olduğu zaman) normal sayfa metni iyi görünüyor. ancak tablet ve mobil sürüm metni taşması için. Zaten

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

kullanarak değilim ama bu sadece masaüstü boyutu sayfasında etkilediğini alır. Web kullanıcılarım için herhangi bir şey gönderebilir ve yazı başlığı ile birlikte ön sayfada görüntülenir. Başlık çok uzun olduğunda taşmayı durdurmak için yukarıdaki kodu kullandım. ancak ekranın boyutunu azalttığımda, taşma önleme başlığı hala bunun için çok uzun. Hedefime nasıl ulaşabilirim?

<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

Değişim yazı boyutu:

Sen dar ekranlar için stile ayarlamak için media queries kullanabilirsiniz

;

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

Ya da kolay, pencerenin hemen (viewport-percentage lenghts) bir yazı tipi boyutu göreli kullanın:

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