Question

我需要创建一个适应其容器DIV大小的文本，扭曲自身以始终填充DIV内的整个空间。所以它应该始终是width = 100％和height = 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插件，用于生成大而大胆的＆amp;响应头条新闻

Answer 2

查看CSS视口百分比长度，这可能是您正在寻找的内容：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单位+变换就可以了。

问题：小窗口上的长文字可能太小而无法阅读
大屏幕上的短文将会非常紧张

＆＃13;

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);
  }

＆＃13;

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

＆＃13;

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

以某种方式仍然设置最大和最小字体大小是明智的，这样它在任何时候都可以读取，并最终在小屏幕上打破一条线。

编辑：我确实理解100％的容器，而不是窗口的高度，但scale（）在这种情况下也会这样做。

CSS可变形文本

3 个答案:

选项1

选项2

选项3