javascript - 旋转后使文本适合 div 容器

Question

目前我正在尝试设计一种按钮，将鼠标悬停在该按钮上时会显示网站左侧的一段文字。

http://i.imgur.com/9UC7QAs.png

但是，如您所见，我的问题是，在将文本的 div 容器旋转 -90 度，然后将文本本身旋转 +90 度以使其平衡后，文本退出屏幕，我似乎找不到办法修复它并使其适合 div 的蓝色区域。

HTML:

<div class="wrap2">
 <div class="text2">
  <p class="rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc ornare volutpat ante vitae tempor. `enter code here`Suspendisse sapien augue, imperdiet 
id nisl sit amet, eleifend vestibulum metus. Donec fermentum et arcu ut 
bibendum.
   </p>
</div>
 <div class="left">Lorem</div>
  </div>

CSS:

        .wrap2 {
        margin: -270px 0 0 -170px;
        width: 330px;
        height: 0;
        padding: 0 12px 12px 12px;
        -ms-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    .text2 {
        width: 330px;
        height: 0;
        font-size: 18px;
        opacity: 0.5;
        color: #434343;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        text-align: center;
        background: #C6F6FF;
        transition: 1s all;
        font-family: 'Josefin Slab', serif;
        overflow: hidden;
        color: rgba(67, 67, 67, 1);
    }

    .left {
        width: 120px;
        font-family: 'Josefin Slab', serif;
        transition: 1s all;
        opacity: 0.5;
        color: #434343;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 30px;
        padding: 7px 5px 0 5px;
        margin: 0 auto;
        background: #C6F6FF;
        font-size: 26px;
        color: rgba(222, 232,, 1);
        text-align: center;
    }

    .wrap2:hover .text2 {
        height: 140px;
        opacity: 1;
    }

    .wrap2:hover .left {
        opacity: 1;
    }

    .rotate {
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

Answer 1

你可以使用writing-mode和 flex 模型以避免处理转换: (最小高度选项，这里是演示目的)

.wrap2 {
  display: inline-flex;
  align-items: center;
  min-height: 90vh; /* ? do you need something of that kind ? */
  background: lightblue;
  margin:0 1em
}

.text2 {
  max-width: 0;
  overflow: hidden;
  transition: 1s
}

.rotate {
  width: 300px;
}

.left {
  writing-mode: vertical-rl;
  width: 1em;
  ;
  background: lightblue;
  padding: 1em 0.5em;
  border-radius: 0 1.5em 1.5em 0;
  margin-right: -2em
}

.wrap2:hover .text2 {
  max-width: 300px;
}

<div class="wrap2">
  <div class="text2">
    <p class="rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare volutpat ante vitae tempor. `enter code here`Suspendisse sapien augue, imperdiet id nisl sit amet, eleifend vestibulum metus. Donec fermentum et arcu ut bibendum.
    </p>
  </div>
  <div class="left">Lorem</div>
</div>