旋轉文字溢出瀏覽器窗口

我在流體佈局網站內部旋轉標題時出現問題：我想根據瀏覽器窗口的高度調整此標題。但是，現在，當我調整窗口大小時，文本的頂部溢出並隱藏起來。旋轉文字溢出瀏覽器窗口

我發現它可能與Bootstrap 3的視口和新的「移動優先」方法有關，但是我真的在其他方面失明。另外，申請overflow : hidden財產，沒有成功。

這裏的HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bootstrap 101 Template</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/stylesheet.css" rel="stylesheet"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body> 

    <div class="container"> 
     <div class="row"> 
      <header> 
       <h1>Welcome to Yd Design</h1> 
      </header> 
     </div> 
    </div> 

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://code.jquery.com/jquery.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html>

而CSS：

@import "bootstrap.min.css"; 

html { 
    min-height: 100%; 
    min-width: 100%; 
    position: relative; 
} 

body { 
    height: 100%; 
    width: 100%; 
} 

header { 
    position: absolute; 
    bottom: 0; 
    left: 0; 

    -moz-transform-origin : 0 0; 
    -webkit-transform-origin : 0 0; 
    -ms-transform-origin : 0 0; 
    -o-transform-origin : 0 0; 
    transform-origin: 0 0; 

    -moz-transform : rotate(-90deg); 
    -webkit-transform : rotate(-90deg); 
    -ms-transform : rotate(-90deg); 
    -o-transform : rotate(-90deg); 
    transform: rotate(-90deg); 
} 

h1 { 
    font-size: 5.6em; 
    font-weight: bolder; 
}

預先感謝您爲您解答！

編輯：

根據要求，我添加了一個JSFiddle。爲了兼容性，我還添加了瀏覽器特定的前綴。

http://jsfiddle.net/smpte11/v6s9H/

來源

2014-01-05 Felix Brousseau

你可以做一個[JSFiddle]（http://jsfiddle.net/）？ – redolent

我按照你的要求添加了JSFiddle。 Thx提前！ –

我認爲唯一的可能性是檢查與JavaScript的標題的寬度，並相應地改變其位置。 PLEASE證明我錯了，我討厭這個主意;） – user1950929

這爲我工作：

對於用於旋轉的容器（在這種情況下，<header>），設置其寬度的值，如500像素。
然後，將父容器的空白頂部設置爲相同的值（500px）。

對於一個完整的例子，我修改你的提琴：http://jsfiddle.net/v6s9H/3/

附加說明：

對於一個動態的寬度，也需要更多的工作。我建議旋轉父容器並定位它，然後在標頭上執行float：right，而在標頭上沒有設置寬度，而是在其中一個父容器上。總之，你可以通過試驗更多的嵌套div來做一個動態寬度。

來源

2014-01-06 01:57:51 redolent

Thx很多！我也會嘗試你的動態解決方案。 Thx再次！ –

旋轉文字溢出瀏覽器窗口

回答

相關問題