旋转的文本溢出浏览器窗口答案

【问题标题】：Rotated text spills out of browser window旋转的文本溢出浏览器窗口
【发布时间】：2014-01-23 04:46:40
【问题描述】：

我在流式布局网站内遇到旋转标题的问题：我想让这个标题根据浏览器窗口的高度进行调整。但是，现在，当我调整窗口大小时，文本的顶部溢出并被隐藏。

我发现这可能与 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/

【问题讨论】：

你能发一个JSFiddle吗？
我按照你的要求添加了 JSFiddle。提前谢谢！
我认为唯一的可能性是使用 javascript 检查标题的宽度并相应地更改其位置。请证明我错了，我讨厌这个主意；）
@user1950929，你可以看到我的解决方案。我证明你错了吗？
@redolent only half :D 我在考虑动态尺寸，但我会试试你的想法。不久前我遇到了同样的问题，并使用 jQuery 来修复它。不是很喜欢^^

标签： html css twitter-bootstrap-3 transform fluid-layout

【解决方案1】：

这对我有用：

对于旋转的容器（在本例中为 <header>），将其 width 设置为一个值，例如 500px。
然后，将父容器的 margin-top 设置为相同的值 (500px)。

作为一个完整的例子，我修改了你的小提琴：http://jsfiddle.net/v6s9H/3/

补充说明：

对于动态宽度，它需要更多的工作。我建议旋转父容器并定位它，然后在标题上执行 float:right ，而标题上没有设置宽度，而是在其中一个父容器上。简而言之，您可以通过尝试更多嵌套的 div 来实现动态宽度。

【讨论】：

非常感谢！我也会尝试使用您的动态解决方案。再次感谢！