旋转内容时调整 div 的大小

Question

我不知道我的问题与可能重复的问题有很大不同。但是，可能重复的答案不起作用（即使作为答案提供的 jsFiddle 似乎也没有旋转文本）。这个线程上的答案实际上解决了我的问题。

当里面的文本旋转 90 度时，我试图让 div 调整大小。现在，即使文本通过旋转变得“变细”，div 的宽度也保持不变。

我有这样的东西：

html, body {
  height: 100%;
  margin:0px;
}

.pane {
  width: auto;
  float:left;
  height: 100%;
  border: 1px solid black;
}

.vertical {
  display: block;
  transform-origin: top right 0;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

<div class="pane"><span class="vertical clearfix">This is text</span></div>
<div class="pane"><span>This is another Pane</span></div>

你可以看到sample plunk here。

如果可能，我会尽量避免使用硬编码的高度或宽度。

Answer 1

当你使用 transform 或 position:relative;元素使用的初始空间保持不变，只是在屏幕上绘制不同。

这里如果你想让你的旋转框只使用一个行高的宽度，你需要设置这个宽度，让内容溢出。

翻译可用于替换视线中的内容

white-space:nowrap 将文本保留在一行

最终，由于使用的旋转值和宽度减小，您可以使用方向将溢出推向相反的方向。

html,
body {
  height: 100%;
  margin: 0px;
}

.pane {
  width: auto;
  float: left;
  height: 100%;
  border: 1px solid black;
}

.vertical {
  display: inline-block;
  text-align: left;
  float: right;
  padding-right: 1em;
  width: 0.25em;
  white-space: nowrap;
  direction: rtl;
  transform-origin: top left;
  transform: rotate(-90deg) translate(-100%);
}

<div class="pane">
  <span class="vertical">This is text</span>
</div>
<div class="pane">
  <span>This is another Pane</span>
</div>

否则，您可以使用 min-width 和负边距，实际上将元素宽度减小到无；

我会选择这个更简单和可靠的

html,
body {
  height: 100%;
  margin: 0px;
}

.pane {
  width: auto;
  min-width:1.2em;
  float: left;
  height: 100%;
  border: 1px solid black;
}

.vertical {
  display:inline-block;
  padding-right:0.25em;
  margin-right:-999px;
  transform-origin: top left;
  transform: rotate(-90deg) translate(-100%);
}

<div class="pane">
  <span class="vertical">This is text</span>
</div>
<div class="pane">
  <span>This is another Pane</span>
</div>
<div class="pane">
  <span class="vertical">This is some more text</span>
</div>