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

当你使用变换或位置时：相对;元素使用的初始空间保持不变，只在屏幕上绘制不同。

如果您希望旋转的框仅使用一个行高的宽度，则需要设置此宽度并让内容溢出。

translate可用于替换视线中的内容

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>

旋转内容时调整div的大小

1 个答案: