Question

div总是有一个固定的高度。其中的文本应始终居中。一旦文本变得大于div，字体大小应该变小，以便文本在div中居中。问题是，我不能在标题中添加不同的类。有谁知道如何解决这个问题？我需要javascript吗？任何帮助将不胜感激。谢谢。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

你可以用简单的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>

编辑对齐中心的文字

Answer 2

FitText是我过去项目中使用的Javascript-Library。您可以定义一系列字体大小，并且可以使用最大的字体大小。

Answer 3

添加css

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

固定高度div中的中心文本，不间断的文本

3 个答案: