Question

我有一个带有标题的div，它已经用CSS转换为旋转-90度，因此它垂直显示。

#mydiv h2 {
    writing-mode: tb-rl;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space: nowrap;
    width: 20px;
    height: 20px;
}

问题是包含的div不会随文本延伸;相反，文本浮动在div框之外。

如何使用文本拉伸div？

Answer 1

尝试设置width: auto;和transform-origin，但在包含div上设置 - 就像这样：

div {
    writing-mode:tb-rl;
    transform: rotate(-90deg);
    transform-origin: top left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    display:block;
    bottom:0;
    position: absolute;
    outline: solid 2px green;
    width:auto;
    height:20px;
}
h2 {
    margin-top: -5px;
    background: pink;
}

您可以在此处看到它：http://dabblet.com/gist/2725392 希望这有帮助！

Answer 2

对于transform的方法，请参阅我的回答类似的问题：https://stackoverflow.com/a/47860039/1709587

或者，只是使用writing-mode: vertical-lr（或已弃用的writing-mode: td-lr）似乎在现代版本的Chrome中运行良好;包含div将正确容纳其中的h2，并且不需要transform。请参阅以下示例：

＆＃13;

#container {
  /* Pink background for easier visualisation of the end result */
  background: pink;
  
  /* Optional; shrinks width of div to minimum required to contain h2 */
  display: inline-block;
}

#container h2 {
  /* Note that the td-lr value used in the question is deprecated;
     vertical-lr is the modern equivalent. See:
     https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

     Consider also using
       -webkit-writing-mode: vertical-lr
     and
       -ms-writing-mode: td-lr
     for compatibility with older browsers. */
  writing-mode: vertical-lr;

  /* Optional; flips the heading, so that it is written bottom-to-top
     instead of top-to-bottom.
     Consider also using -webkit-transform and -moz-transform and
     -o-transform and an equivalent transform with filter for compatibility
     with old browsers.*/
  transform: scale(-1, -1);
  
  /* Optional: disable breaks in the title */
  white-space: nowrap;
}

＆＃13;

<div id="container">
  <h2>Some text</h2>
</div>
<div>
  More stuff
</div>

＆＃13;

但是，如果您尝试使用当前（2017年12月）版本的Firefox，Edge或Safari，您将发现大量布局错误;四个主流浏览器目前对垂直writing-mode的处理相当破碎。它们彼此不一致，并且它们通常甚至不具有确定性 - 您可以在开发工具中关闭和再次打开样式规则，最终得到一个不同的布局页面。因此，虽然这种方法是一种选择，但要小心使用它并进行广泛测试。

Answer 3

您必须定位div大小而不是h2大小添加以下代码并检查。

#block-views-archive-block {
height: 20px;
width:20px;
overflow: visible;
}

Answer 4

如果您只是改变了div而不是文本，那么，相信通过这样做，它也会改变div的内容。

您也可以将height设置为auto。

或者您可以尝试通过添加必要数量的像素来手动增加height。

我希望其中一种解决方案有效！

-Brian

保持div高度与已旋转的文本一致

4 个答案: