旋转文本容器自动高度

Rotated text container auto height

本文关键字：高度 文本 旋转      更新时间：2023-09-26

我在容器中有一些90度旋转跨度，我想使容器的高度设置为最高旋转元素的高度。

第一步是获取最高元素的高度:

var $max_width = Math.max.apply(Math, $('.tbl-value').map(function(){ 
  return $(this).width(); 
}).get());

来源:jQuery get max width of childdiv's

这个解决方案看起来对我来说是正确的，但似乎不工作。下一步是将父容器的高度设置为$max_width的大小。

这是我在小提琴上的代码:http://jsfiddle.net/m4z5701p/

我怎么能做到这一点?

p。

.rotated-text {
     display: inline-block;
     overflow: hidden;
     width: 1.5em;
     line-height: 1.5;
 }
.rotated-text__inner {
     display: inline-block;
     white-space: nowrap;
     transform: translate(0,100%) rotate(-90deg);
     transform-origin: 0 0;
 }
.rotated-text__inner:after {
     content: "";
     float: left;
     margin-top: 100%;
 }
<span class="rotated-text">
     <span class="rotated-text__inner">
         Rotated foo
     </span>
 </span>

关于旋转解决方案的最佳文章，试试这个，它可能对你有用http://kizu.ru/en/fun/rotated-text/

相关文章：