javascript - 文本在固定高度 div 中居中，文本不间断

Question

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

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

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>

编辑 居中对齐文本