固定高度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中的文字，文字无间隔

回答

相关问题