使用 CSS 旋转文本的灵活布局答案

【问题标题】：Flexible Layout with CSS Rotated Text使用 CSS 旋转文本的灵活布局
【发布时间】：2012-08-11 08:21:07
【问题描述】：

我正在尝试布局一个需要将文本标签旋转 270 度的控件。文本标签的宽度在合理范围内是可变的（例如，100px 到 500px）。

我试图让它在 jsFiddle 中工作

但遇到了一些我无法解决的问题：

是否可以使用 CSS 转换来解决这些问题？

更新

这个 jsFiddle 让问题 2. 更加明显

【问题讨论】：

【解决方案1】：

所有应用的转换都受transform-origin 影响。默认情况下，它的值为50% 50%，这意味着所有的变换都将相对于块的中心进行。

主要思想是将其更改为0 0（左上角）——这将允许我们省略“基于旋转文本长度硬编码的值” demo on dabblet.com

尝试设置它：

CSS：

transform: rotate(-270deg);
transform-origin: 0 0;

【讨论】：

该代码在 IE 8 中不起作用，因此出于所有实际目的，它可能在任何浏览器中都不起作用，除非 Eric J. 的目标受众是非常选定的受众。它也不能运行旧版本的 Firefox，后者仍然比较常见，尤其是在学校等地方。
@GregRozmarynowycz 对于旧的ie，您可以使用IETransformsTranslator 获得相同的结果。此代码will work in all browsers (ie9+, ff3.5+, chrome all, safari 3.1+, android 2.1+) 我没有为可读性显示前缀。您可以在项目中使用 prefixr 作为正确和实际的前缀。
@GregRozmarynowycz 如果 Eric J. 决定使用它，你为什么要跟我谈论财产支持？
这段代码仍然显示了青色文本在黄色 DIV 下方延伸的相同问题，尽管它确实解决了黄色 div 中文本开头的间隙问题。
IETransformsTranslater 非常有用！害怕一旦我在其他浏览器上运行，我就不得不自己做数学。

【解决方案2】：

这是你要找的吗？

我认为纠正 div 高度的唯一解决方案是 javascript。

为了摆脱多余的空间，我绝对定位了 div。

我也不认为你的 IE 旋转值是正确的，我将它们更改为 1.2 并且它似乎工作。然而，仍在研究如何让 IE 获得正确的 div 高度，但工作方式不同。

编辑：

IE实际上改变了元素的尺寸，所以你必须得到高度。同样在 IE 中，旋转的 div 必须从容器顶部定位，而不是像其他浏览器那样位于底部

编辑：更新链接

【讨论】：

【解决方案3】：

我最终解决了这个问题，使用一个名为mbFlipText 的小 jQuery 包装器生成的 SVG 来管理 IE 支持

【讨论】：