Question

我正在寻找一种扩展一系列居中标题的方法，但是如果缩小窗口（文档难以描述），文本会突破容器元素;每个标题都需要留在一条线上并居中。

你可以看一下我在这里谈论的内容：

http://codepen.io/bobdobbalina/pen/HdBfE/?editors=110

您需要向上/向下扩展浏览器窗口以查看我的意思。

非常感谢任何建议。

Answer 1

不太确定您正在尝试，但如果您希望文本居中并且两边都溢出，则h2应该没有虚拟宽度，并且应该转动显示到inline-block。

测试此http://codepen.io/gc-nomade/pen/cAyit

在这种情况下，transform无需执行此操作：）

Answer 2

只需从你的css中删除'white-space：pre'这个

'pre'保留新行，空格和标签

h1 {
  white-space: pre;
}

h2 {
  white-space: pre;
}

Answer 3

在这篇CSS-Tricks帖子中，我找到了一个仅限CSS的解决方案，可以将font-size缩放到屏幕尺寸。

该解决方案是font-size的新单元：vw和vh。哪个是相对于屏幕的宽度和高度。因此，我更改了font-size上h1的定义，h2：

h1 {
    margin: 0;
    white-space: pre;
    font-size: 4vw; /* this is the vw (view width) unit in action */
}
h2 {
    white-space: pre;
    font-size: 3vw; /* this is the vw (view width) unit in action */
}

这是一个forked CodePen，显示该解决方案的效果，文本缩放相对于浏览器的宽度。

（请注意，并非所有浏览器都支持此功能，因此JS备份计划可能会很好。）

使用CSS3 translateZ缩放居中文本

3 个答案: