Question

我正在尝试使用信息文本（这是一个简单的div）创建一个信息框。在此信息框的右端，应该有一个名为“more info”（嵌套div）的文本，这应该表明您可以单击信息框。为了节省空间，我想将文本旋转90度，它应该只占用文本高度“更多信息”的空间。但我无法让它发挥作用。我的文本分为两行，或者如果我使用white-space: nowrap;，则文本不会垂直居中对齐。

有没有人提示我可以尝试的另一个css属性？

我创造了一个小提琴：https://jsfiddle.net/girlscout/9e5u3j5w/3/

我为这个例子用不同的颜色着色了两个div，以便看看div正在做什么。

感谢Brett提示代码片段（这是我的第一篇文章，我不知道这是可能的）。这是代码：

.first-div {
  border:1px solid blue; width:300px; height:100px; margin:20px auto;
  display:flex;
  /*justify-content:flex-end;  */
}
.second-div {
  background-color:green;
  /*align-items:center;*/
}

.mytext{
    transform:rotate(-90deg);
    /*white-space: nowrap;*/
}

<div class="first-div">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
     <div class="second-div"><p class="mytext">more info</p></div>
</div>

Answer 1

so you can make it work by setting the width on the .second-div and changing the padding and transform-origin on .mytext, but its going to be different for every tab you create.

.second-div {
   background-color: green;
   width: 120px;
   position: relative;
}
.mytext {
   position: absolute;
   white-space: nowrap;
   top: 0;
   padding: 8px;
   color: #FFF;
   transform-origin: 50% 100%;
   transform: rotate(-90deg);
}

Answer 2

我相信一把钥匙就是transform-origin property。

我们还position: absolute .mytext元素并修复宽度，高度和其他一些属性。但是，它仍然足够灵活，可以处理各种内容。

像这样：

.first-div {
  border: 1px solid blue;
  width: 300px;
  height: 100px;
  margin: 20px auto;
  display: flex;
}

.second-div {
  position: relative;
  background-color: green;
  height: 100%;
  box-sizing: border-box;
  flex-basis: 80px;
}

.mytext {
  position: absolute;
  top: 20px;
  transform: rotate(-90deg);
  transform-origin: 0% 0%;
  white-space: nowrap;
  margin: 100px 0 0 0;
  line-height: 30px;
  width: 100px;
  text-align: right;
}

.first-div.larger {
  height: 250px;
}

<div class="first-div">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
  <div class="second-div">
    <p class="mytext">more info</p>
  </div>
</div>

<div class="first-div">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
  <div class="second-div">
    <p class="mytext">info</p>
  </div>
</div>

<div class="first-div larger">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
  <div class="second-div">
    <p class="mytext">even more info</p>
  </div>
</div>

Answer 3

我想我明白你在寻找什么。您需要为first-div的{{1}}和relative的{{1}}添加定位。见下面的代码。

请在此处查看：CODEPEN

＆＃13;

second-div

＆＃13;

absolute

＆＃13;

Answer 4

有一种可能的解决方案，虽然它意味着在某种程度上重复了你的标记。您将需要两个元素：用作隐形填充的文本和实际显示的文本：

<div class="second-div">
  <!-- Used to precaluclate/reserve space, not displayed -->
  <div class="mytext-spacer">more info</div>

  <!-- The actual text that is displayed and rotated -90deg -->
  <div class="mytext">more info</div>
</div>

该解决方案利用了这样一个事实，即您可以使用“预先占据”旋转文本所需空间的间隔元素。这将是.mytext-spacer元素。我们只是强制它以垂直方式显示文本，以便占用与旋转文本相同的空间：

.mytext-spacer {
  text-orientation: upright;
  writing-mode: vertical-rl;
  visibility: hidden;
}

然后使用visibility: hidden将间隔物隐藏起来。使用display: none将无效，因为它将从文档流中取出，并且无法“保留”适合旋转文本所需的预先计算空间。

接下来，您只需旋转实际的.mytext即可。我使用了位置+翻译技巧来直观地居中文本。我们不能在这里利用flexbox，因为它会干扰涉及隐藏间隔文本的布局。

.mytext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  text-align: center;
}

.first-div {
  border: 1px solid blue;
  width: 300px;
  height: 100px;
  margin: 20px auto;
  display: flex;
  /*justify-content:flex-end;  */
}

.second-div {
  background-color: green;
  position: relative;
}

.mytext-spacer {
  text-orientation: upright;
  writing-mode: vertical-rl;
  visibility: hidden;
}

.mytext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  text-align: center;
}

<div class="first-div">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
  <div class="second-div">
    <div class="mytext-spacer">more info</div>
    <div class="mytext">more info</div>
  </div>
</div>

<div class="first-div">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
  </p>
  <div class="second-div">
    <div class="mytext-spacer">this is a long long text</div>
    <div class="mytext">this is a long long text</div>
  </div>
</div>

在div内旋转90度的文本并将其放在右端

4 个答案: