div内のテキストを90度回転して右端に配置します

Question

情報テキスト（単純なdivです）で情報ボックスを作成しようとしています。この情報ボックスの右端には「詳細情報」（ネストされたdiv）という名前のテキストがあります。これは情報ボックスをクリックできることを示します。スペースを節約するために、私はテキストを90度回転させたいと思います。テキストの高さと同じくらい多くのスペースが必要です。しかし、私はそれを働かせることができませんでした。テキストが2行に分割されているか、またはwhite-space: nowrap;を使用すると、テキストが垂直方向に中央揃えされません。

誰かが私が試すことができる別のCSSプロパティのヒントを持っていますか？

私はバイオリンを作成しました：https://jsfiddle.net/girlscout/9e5u3j5w/3/

私はdiv要素が何をしているかを確認するために、ちょうどこの例のために別々の色を持つ2つのdivを色付け。

コードスニペットでヒントをいただきありがとうございます（これは私の最初の投稿ですが、これが可能であるかどうかはわかりませんでした）。ここでは、コードは次のようになります。

.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

私は1つの鍵が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 2

私は私はあなたが探しているものを理解すると思います。 first-divにrelativeとsecond-divの位置を追加する必要があります。absoluteです。下記のコードを参照してください。

ここでそれを参照してください：CODEPEN

.first-div { 
 
     border: 1px solid blue; 
 
     width: 400px; 
 
     height: 100px; 
 
     margin: 20px auto; 
 
     display: flex; 
 
     position: relative; 
 
     padding-right: 40px; 
 
    } 
 
    .second-div { 
 
     position: absolute; 
 
     top: 0px; 
 
     right: 0px; 
 
     background-color: green; 
 
    } 
 
    .mytext{ 
 
     transform:rotate(-90deg); 
 
     padding: 20px 0; 
 
     font-size: 0.7em; 
 
     color: #fff; 
 
    }

<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 3

をので、あなたは.second-div要素に幅を設定し、パディングを変更することにより、それを動作させると.mytextに起源を変換することができ、あなたが作成するすべてのタブで異なることになります。

.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 4

。あなたは、2つの要素が必要になります。目に見えない充填材として機能し、テキスト、および実際に表示されるテキスト：

<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>