旋转内容时调整大小 div

Question

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

我正在尝试让 div 在内部文本旋转 90 度时调整大小。现在，div 保持相同的宽度，即使文本通过旋转变成 "thinner"。

我有这样的东西：

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

当你使用变换或position:relative时；元素使用的初始 space 保持不变，只是在屏幕上绘制不同。

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

翻译可用于替换眼前的内容

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 和负边距，这实际上将元素宽度减小到 none;

我会选择这个更简单和扎实的

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>

旋转内容时调整大小 div

Resize div when content is rotated

css

css-transforms