固定高度div中的文字，文字無間隔

div總是有固定的高度。其中的文字應始終居中。只要文本大於div，字體大小應該變小，以便文本以div爲中心。問題是，我無法爲標題添加不同的類。有沒有人可以解決這個問題？我需要JavaScript嗎？任何幫助將不勝感激。謝謝。固定高度div中的文字，文字無間隔

.fix-height{ 
 
    height: 60px; 
 
    width: 270px; 
 
    border: 1px solid #000000; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
h2{ 
 
font-size: 20px; 
 
}

<div class="fix-height"> 
 
<h2>Lorem ipsum dolor sit Lorem ipsum dolor sit</h2> 
 
</div> 
 
<br><br><br><br> 
 
<div class="fix-height"> 
 
<h2>Lorem ipsum dolor sit</h2> 
 
</div> 
 

 
<br><br><br><br> 
 
<div class="fix-height"> 
 
<h2>Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit</h2> 
 
</div>

來源

2017-03-06 azrm

文本你應該去看一下這：http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container – Fabio

你可以用簡單的jQuery

這裏做的是代碼：

$(function() { 
 
    $('#fitin div').css('font-size', '1em'); 
 

 
    while ($('#fitin div').height() > $('#fitin').height()) { 
 
    $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px"); 
 
    } 
 

 
});

#fitin { 
 
    width: 300px; 
 
    height: 200px; 
 
    line-height: 200px; 
 
    border: 1px solid black; 
 
    overflow: hidden; 
 
    font-size: 1em; 
 
    text-align: center; 
 
} 
 

 
#fitin div { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    line-height: normal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="fitin"> 
 
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> 
 
</div>

編輯對準中心

來源

2017-03-06 09:37:07

OP說：'它中的文字應該始終居中 –

添加CSS

.fix-height{ 
display: table-cell; 
    vertical-align: middle; 
}

來源

2017-03-06 09:35:32

是的，我知道這一點，謝謝！但它只是居中在垂直，而不是在水平 – azrm

添加CSS「文本對齊：中心;」 –

謝謝，這有效，但我該如何解決問題，文字不應該變得比div大？ – azrm

FitText是一個Javascript庫我在過去的項目中使用。你可以定義一個字體大小的範圍，它可能是最大的一個。

來源

2017-03-06 09:35:43 Erdem

固定高度div中的文字，文字無間隔

回答

相關問題