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

时间:2012-05-18 13:33:13

标签: css html5 html css3

我有一个带有标题的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?

4 个答案:

答案 0 :(得分:2)

尝试设置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 希望这有帮助!

答案 1 :(得分:0)

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

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



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

<div id="container">
  <h2>Some text</h2>
</div>
<div>
  More stuff
</div>
&#13;
&#13;
&#13;

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

答案 2 :(得分:-1)

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

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

答案 3 :(得分:-1)

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

您也可以将height设置为auto

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

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

-Brian