保持div高度與已旋轉的文字一致

我有一個帶有標題的div，它已經被CSS轉換旋轉-90度，所以它垂直顯示。保持div高度與已旋轉的文字一致

#mydiv h2 { 
    writing-mode: tb-rl; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3); 
    white-space: nowrap; 
    width: 20px; 
    height: 20px; 
}

問題是，包含div不與文本拉伸;相反，文本漂浮在div框外。

我該如何讓文本伸縮？

來源

2012-05-18 James Kirkby

2012年的行爲可能不同，但現在''writing-mode：tb-rl'帶有'* -transform：rotate（-90deg）'會導致兩者相互抵消並且文本被水平寫入。這裏給出的CSS（以及下面接受的答案）無法在現代瀏覽器中旋轉文本。 –

嘗試設置width: auto;和transform-origin，但在含div - 這樣的：

div { 
    writing-mode:tb-rl; 
    transform: rotate(-90deg); 
    transform-origin: top left; 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    white-space:nowrap; 
    display:block; 
    bottom:0; 
    position: absolute; 
    outline: solid 2px green; 
    width:auto; 
    height:20px; 
} 
h2 { 
    margin-top: -5px; 
    background: pink; 
}

你可以看到它在這裏的行動：http://dabblet.com/gist/2725392 希望這有助於！

來源

2012-05-18 13:58:47 Ana

感謝您的嘗試，但id沒有工作 –

我剛剛編輯了我的答案。它是這樣工作嗎？有了這個更新的版本，如果我繼續在h2標籤內添加文本，h2和div都會伸展... – Ana

-1;除了在現代版本的Chrome中無法使用（也許它在2012年完成！）這一事實，您只需將問題轉移到層次結構中的一個元素即可。好的，你可以旋轉h2的父代而不是h2;現在，你如何讓*父母的父母*身高增長來遏制他們？ –

-1

您必須定位div大小而不是h2大小添加下面的代碼並檢查。

#block-views-archive-block { 
height: 20px; 
width:20px; 
overflow: visible; 
}

來源

2012-05-18 13:46:44 tamal3053

那是不對的，包含div的高度取決於在h2標題中有多少個字符，所以包含的div必須是自動的 –

-1

如果您只是轉換div而不是文本，相信這樣做，它也會轉換div的內容。

您還可以將height設置爲auto。

或者您可以嘗試增加必要數量的像素手動增加height。

我希望這些解決方案中的一個可行！

-Brian

來源

2012-08-16 19:44:34 OneChillDude

對於transform的做法，看到我這個回答類似的問題：https://stackoverflow.com/a/47860039/1709587

另外，只是使用writing-mode: vertical-lr（或已經過時writing-mode: td-lr）似乎工作在現代精細Chrome版本;包含的div將正確地容納其中的h2，並且不需要transform。看下面的例子：

#container { 
 
    /* Pink background for easier visualisation of the end result */ 
 
    background: pink; 
 
    
 
    /* Optional; shrinks width of div to minimum required to contain h2 */ 
 
    display: inline-block; 
 
} 
 

 
#container h2 { 
 
    /* Note that the td-lr value used in the question is deprecated; 
 
    vertical-lr is the modern equivalent. See: 
 
    https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode 
 

 
    Consider also using 
 
     -webkit-writing-mode: vertical-lr 
 
    and 
 
     -ms-writing-mode: td-lr 
 
    for compatibility with older browsers. */ 
 
    writing-mode: vertical-lr; 
 

 
    /* Optional; flips the heading, so that it is written bottom-to-top 
 
    instead of top-to-bottom. 
 
    Consider also using -webkit-transform and -moz-transform and 
 
    -o-transform and an equivalent transform with filter for compatibility 
 
    with old browsers.*/ 
 
    transform: scale(-1, -1); 
 
    
 
    /* Optional: disable breaks in the title */ 
 
    white-space: nowrap; 
 
}

<div id="container"> 
 
    <h2>Some text</h2> 
 
</div> 
 
<div> 
 
    More stuff 
 
</div>

但是，你會發現佈局錯誤的轉換，如果你試圖得到這個工作電流（2017年十二月）的Firefox，邊緣或Safari版本;目前四大瀏覽器已經處理了垂直writing-mode s。它們彼此不一致，而且它們通常甚至不是確定性的 - 您可以在開發工具中關閉並重新開啓樣式規則，並最終得到一個不同佈局的頁面。因此，雖然這種方法是一種選擇，但要小心使用它並進行廣泛的測試。

來源

2017-12-17 16:43:08

保持div高度與已旋轉的文字一致

回答

相關問題