Question

我仅在CSS中寻找解决方案。

我正在创建一个侧边栏，其中的div中有大文本。

现在，我希望当旋转的text变大时，它应该从底部开始，最后，如果div应该具有响应性，它也应该具有椭圆形

我做了什么：我已经为其创建了一个示例，但是它最终没有从底部开始，并且也没有响应，因为父级高度是动态的，因此我需要将子级宽度设置为与父级相同，以便它位于父级内部。因为它是旋转文本，所以子宽度应为父高度。

.float-sidebar {
  height: 100%; // here height is dynamic but it is not in px 
  float: left;
  overflow: hidden;
  width: 30px;
  line-height: 1.5;
}

.vertical-text:after {
  content: "...";
  float: left;
  margin-top: 100%;
}

.vertical-text {
  height: 100%;
  display: inline-block;
  white-space: nowrap;
  transform: translate(0, 50%) rotate(-90deg);
  /* change this */
  transform-origin: 0 0;
  font-size: 1.4em;
  color: grey;
}

.vertical-text>span {
  /* add a span for true centring */
  transform: translateX(-50%);
  width: 100%; // when height changes of parent then it should change as well
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 0.5em;
  box-sizing: border-box;
}

.sidebar-main:hover {
  background: linear-gradient(to right, white, #a6a6a6)
}

.sidebar-main:active {
  background: linear-gradient(to right, white, #989898)
}

.sidebar-main {
  cursor: pointer;
  border: 1px solid grey;
  box-sizing: border-box;
  height: 100%;
  background: linear-gradient(to right, white, lightgrey);
  border-radius: 2px;
}

<div class="float-sidebar">
  <div class="sidebar-main">
    <div class="vertical-text">
      <span>start as das d sa dsa ds ad sa dsa d sad sa d sa d adasdasdsad s ssa  sad sa dsa d sa dsa d sad sadsadas </span>
    </div>
  </div>
</div>

我的朋克： https://plnkr.co/edit/tH2LtCnR3yHzXpSEeQan?p=preview

如何使您的孩子的div宽度等于父母的高度？

0 个答案: