CSS可变形文本

Question

我需要创建一个适应其容器div大小的文本，使其变形以始终填充div内的整个空间。因此，它应该始终为宽度=100%，高度=100%，并根据浏览器窗口调整大小。

我知道这可以用图像来完成，我怀疑是否有任何方法可以对可编辑文本进行同样的处理，使字体形状本身变形。我应该使用哪个属性？

谢谢你的建议。

Answer 1

选项1

我们将使用Javascript动态更改font-size和line-height

首先，缓存div，这样浏览器就不必在每次调整窗口大小时都找到它。

var $div = $('.foo');

调整窗口大小时运行以下操作，并从一开始触发一次。

$(window).resize(function () {

获取div的当前高度，并将其保存为变量。

var height = $div.height();

根据当前高度设置div内文本的font-size和line-height。

$div.css({
'font-size': (height/2) + 'px',
'line-height': height + 'px'
})
}).trigger('resize');

演示：https://jsfiddle.net/nanilab/6tpztvnc/

---

选项2

您可以使用FitText.js

FitText使字体大小灵活。在你的响应式设计中使用这个插件，可以根据比例调整标题大小。

---

选项3

您可以使用slabText.js

一个jQuery插件，用于生成大的、粗体的&响应性标题

Answer 2

查看CSS Viewport百分比长度，这可能是您想要的：https://css-tricks.com/viewport-sized-typography/

我把一个包含文本的快速容器放在一起，这些文本将根据视口的大小更改大小。你可以在这里查看：http://codepen.io/sktwentysix/pen/GZzvEx

<div class="main">
  <p>
    lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum!
  </p>
</div>
.main {
  border: 1px solid #000;
  padding: 1rem;
  width: 80%;
  height: 500px;
}
p {
  margin: 0;
  font-size: 4vw;
}

希望这能有所帮助！

Answer 3

只有CSS是不可能的，除非知道文本的长度。

如果已知，vw单位+变换即可。

• 问题：小窗口上的长文本可能太小而无法阅读
• 大屏幕上的短文本将被严重拉伸

h1 {
  height: 3vw;
  background: #147EBD;
  text-align: center;
}
span {
  display: inline-block;
  height: inherit;
  line-height: inherit;
  font-size: 10vw;
  transform-origin: top center;
  transform: scale(1, 0.3);
}
h1 + h1 span {
  line-height: 40vw;
  font-size: 40vw;
  transform: scale(1, 0.08);
  }

<h1> <span>longer text to strecth </span></h1>
<h1> <span>short</span></h1>

正如您所看到的，在应用字体大小和适当的比例之前，需要javascript来查找文本长度。

明智的做法是仍然设置最大和最小字体大小，使其在任何时候都保持可读性，并最终在小屏幕上换行。

edit：我确实理解了容器的100%，不是窗口的高度，但scale（）在这种情况下也可以。