Question

我有以下html：

<!DOCTYPE html>
<html>
  <body>
    <h1 style="margin-bottom: 0;">Hello Plunker!</h1>
    <div style="background-color: red; height: 100px; width: 250px;"></div>
  </body>
</html>

基本上我想给我的h1一个width，无论我添加或删除一个单词（根据它调整font-size和the letter-spacing，它内部的文字都应该占用）。我可以改变我的“Hello Plunker”，最后一个字母仍然应该在下面的div完成的地方完成。

如果需要，我可以使用一些js但不能使用Jquery

Answer 1

如果您愿意使用JS，那么http://fittextjs.com/值得一看。我不认为单独使用CSS是可以实现的。

Answer 2

这是一个丑陋的答案，但如果您打算坚持使用CSS，它可能就是这样做的。但是，希望有人能指出更好的方法。

这个想法依赖于text-align: justify将分散所有文本行但最后一行（或仅在一行的情况下唯一一行）的事实。因此，我们正在添加一些无用的文本，以确保至少有两行文本。然后，我们试图隐藏第二行。我确信这可以改进：

＆＃13;

h1 {
  width: 250px;
  height: 1.4em;
  margin-bottom: 0;
  background-color: green;
  text-align: justify;
}

h1 span {
  visibility: hidden;
  display:inline-block;
  line-height: 0px;
}

div {
  background-color: red;
  height: 100px;
  width: 250px;
}

＆＃13;

<h1>Hello Plunker<span>make sure there are two lines, pretty please?</span></h1>
<div></div>

＆＃13;

您可以修改jsfiddle here。说实话，我想最好使用JavaScript。

Answer 3

只是使用transform:scale(jQueryCalc)的想法 - 使内容适合其父亲innerWidth。

＆＃13;

$(document).ready(function() {
  $(".fit").each(function() {
    $(this).css("transform", "scale(" + ($(this).parent().innerWidth() / $(this).width()) + ")");
  });
});

＆＃13;

.container {
  background-color: red;
  height: 70px;
  width: 250px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.fit{
  display: block;
  color: #FFF;
  float: left;
  transform-origin: left top;
  white-space: nowrap;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h1 class="fit">Hello Plunker!</h1>
</div>
<div class="container">
  <span class="fit">Well this should work</span>
</div>
<div class="container">
  <span class="fit">Well this should work; Well this should work</span>
</div>
<div class="container">
  <span class="fit">Well this should work; Well this should work; Well this should work; Well this should work</span>
</div>

＆＃13;

Css h1匹配div宽度

3 个答案: