旋转内容时调整div大小 [英] Resize div when content is rotated

问题描述

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

当文本内部旋转90度时，我想要一个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>这是文字< / span>< / div> 
< div class =pane>< span>这是另一个窗格< / span>< / div& 
  

您可以看到 sample plunk here 。

我尽量避免使用硬编码的高度或宽度。 >

解决方案

元素使用的初始空间保持不变，只在屏幕上绘制不同。

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

translate可用于替换可见内容

white-space：nowrap以保持文本在单行上

，最终，由于使用的旋转值和宽度减少，可以使用方向推溢出

  html，body {height：100％; margin：0px;}。pane {width：auto; float：left;高度：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>这是文本< / span>< / div>< div class =pane> < span>这是另一个窗格< / span>< / div>  

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

我会为这个更简单和固体

  html，body {height：100％; margin：0px;}。pane {width：auto; min-width：1.2em; float：left;高度：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>这是文本< / span>< / div>< div class =pane> < span>这是另一个窗格< / span>< / div>< div class =pane> < span class =vertical>这是一些更多的文本< / span>< / div>  

I don't know that my question is much different than the question in the possible duplicate. However, the answer in the possible duplicate does not work (even the jsFiddle provided as the answer does not seem to even rotate the text). The answer on this thread actually solved my problem.

I'm trying to get a div to resize when the text inside is rotated 90 degrees. Right now, the div stays the same width even though the text becomes "thinner" by rotating it.

I've got something like this:

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>

You can see a sample plunk here.

I'm trying to avoid using hardcoded heights or widths if possible.

解决方案

when you use transform or position:relative; the initial space used by the element remains the same, it is only drawn different at screen.

Here if you want your rotated box to only use the width of one line height, you need to set this width and let content overflow.

translate can be used to replace content in sight

white-space:nowrap to keep text on a single line

and eventually, because of the rotated value used and the width reduced, you may use direction to push overflow in the opposite direction .

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>

Else you may use min-width , and a negative margin that virtually reduce elements width to none;

I would go for this one more simple and solid

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大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！