使文本響應是否溢出它的父div

如何確保文本調整其字體大小以防止溢出靜態50px導航欄？使文本響應是否溢出它的父div

我有一個初步腳本，但它並沒有真正做到這一點。只調整由1px的像素爲每一個瀏覽器調整大小，而如果有人直接進入移動甚至沒有考慮到：

  window.onresize = function(){  
      var title = document.getElementById('testing');    
      var style = window.getComputedStyle(title, null).getPropertyValue('font-size'); 
      var fontSize = parseFloat(style); 
      if(title.scrollHeight > 51){ 
       title.style.fontSize = (fontSize - 0.5) + 'px'; 
       $(title).height(50); 
      } else if (title.scrollHeight < 51) { 
       title.style.fontSize = (fontSize + 0.5) + 'px'; 
       $(title).height(50); 
      } 
      };

來源

2015-10-20 Peter Ward

更實用的方法是使用CSS mediaqueries併爲您的導航欄設置移動安全佈局。 – hampusohlsson

我不完全明白你要做什麼，你的導航大小是根據屏幕尺寸改變還是總是50 x 50？那麼你基本上希望你的文字能夠「填滿」整個Nav基地的大小？ –

@NaturalLam，導航大小保持在50px，但內部div的文本基於數據庫內容而改變。因此，如果內容太長，內容將溢出並導致div的高度超過50px。 Nav的溢出是隱藏的，所以這個內容只是部分可見的。由於這些原因，我認爲CSS不會起作用，因爲文本的初始大小也應該響應此內部div中文本的長度。 –

只需使用CSS ...

#testing{ 
    font-size:1.5vw 
}

？ - 變化值相應當然

來源

2015-10-20 22:31:30 AdamJeffers

當您將平板電腦或全屏窗口旋轉到不同的長寬比時，問題就變得很清楚。也就是說：縮小的窗口會產生很小的文本，因爲它縮小了...... – dandavis

是的，但那是當你使用@media orientation queries將值更改爲ems的時候？只是一個想法 – AdamJeffers

是的，它只是因爲我們的導航欄被硬編碼保持在'50px.'可變的屏幕比率成爲問題。也許答案是寫一個算法，帳戶導航欄本身的高寬比，而不是屏幕。 –

我把一個jQuery的解決方案： http://jsfiddle.net/dsunr5px/1/

，直到其父項內符合這將減少增量的文字大小：

jQuery(document).ready(function() { 

adjustWidth(); 

jQuery(window).onresize(adjustWidth()); 

function adjustWidth() { 

    jQuery(".text").each(function() { 
     var width = jQuery(this).width(); 

     while(width <= jQuery(this).children().width()) 
     { 
      var fontsize = parseInt(jQuery(this).children().css('font-size')); 
      var newfs = fontsize - 1 + 'px'; 
      jQuery(this).children().css({'font-size': newfs}); 
     } 
    }); 
} 

});

但是，正如你可以看到，它可以變得有點瘋狂。一般而言，換行會更方便用戶使用。你也許可以在那裏增加更多的邏輯來確定在哪個點上太小，它應該只是做一個換行符。儘管解決響應式問題的行業標準始終是媒體查詢。除非你有駕駛理由，否則我會調查這個方向的解決方案。

來源

2015-10-20 22:42:18 Practically

明天我會拍這張照片。我不使用媒體查詢的原因可能並不明確，因爲這個標題部分的用戶獨特內容會導致斷點的不同。（我會注意到我們正在使用基金會，而這部分是作爲一個列包裝的。） –

是否可以接受換行符？正如在文本越過列的寬度時，文本會在下一行打斷。如果是這樣，只要確保文本具有CSS屬性顯示：內聯和其父母具有屬性顯示：塊。 – Practically

噢 - 我明白了。我沒那麼清楚。我的div垂直溢出它的父導航欄，而不是水平。文本不溢出。 div的高度增加，並且文本保持在裏面，但是我需要高度保持在50px，並且在溢出50px div之前調整文本的字體大小......如果這樣不夠混亂！ –

使文本響應是否溢出它的父div

回答

相關問題