Question

我的标题与CSS变换旋转成一个角度。我希望正文文本围绕旋转后的文本流动。

如果我使用float: left作为标题，则该文本似乎首先环绕在标题周围，然后实际上旋转了标题，从而导致文本重叠。

我当前系统的一个示例是：

<html>
    <h1 style="transform: rotate(-60deg); float:left">
        Test Heading
    </h1>
    <p>
        HLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam metus, mollis eu purus vitae, semper fermentum nunc. Phasellus nec iaculis sem, in imperdiet eros. Maecenas ligula nibh, elementum in felis eget, vehicula faucibus nibh. Morbi rhoncus vehicula feugiat. Pellentesque vitae lobortis arcu. Nullam vel mi elementum mi feugiat vehicula. Cras tincidunt purus dolor, eleifend aliquet velit ornare tristique. Maecenas lobortis tristique est, sed facilisis lectus pulvinar vestibulum. Nunc tristique tellus non facilisis elementum. Nam lobortis in velit non tempus. Phasellus lobortis vel neque non iaculis. Praesent tristique risus a gravida imperdiet. Quisque fringilla, massa quis placerat congue, nulla velit varius nisi, vel fermentum tortor velit ut nibh.
    </p>
</html>

以下是目标行为的屏幕截图：

Answer 1

您可以尝试向<h1>

添加边距

例如：

<html>
<h1 style="transform: rotate(-60deg); float:left; margin:3em 2em;">
    Test Heading
</h1>
<p>
    HLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam metus, mollis eu purus vitae, semper fermentum nunc. Phasellus nec iaculis sem, in imperdiet eros. Maecenas ligula nibh, elementum in felis eget, vehicula faucibus nibh. Morbi rhoncus vehicula feugiat. Pellentesque vitae lobortis arcu. Nullam vel mi elementum mi feugiat vehicula. Cras tincidunt purus dolor, eleifend aliquet velit ornare tristique. Maecenas lobortis tristique est, sed facilisis lectus pulvinar vestibulum. Nunc tristique tellus non facilisis elementum. Nam lobortis in velit non tempus. Phasellus lobortis vel neque non iaculis. Praesent tristique risus a gravida imperdiet. Quisque fringilla, massa quis placerat congue, nulla velit varius nisi, vel fermentum tortor velit ut nibh.Nam lobortis in velit non tempus. Phasellus lobortis vel neque non iaculis. Praesent tristique risus a gravida imperdiet. Quisque fringilla, massa quis placerat congue, nulla velit varius nisi, vel fermentum tortor velit ut nibh.Nam lobortis in velit non tempus. Phasellus lobortis vel neque non iaculis. Praesent tristique risus a gravida imperdiet. Quisque fringilla, massa quis placerat congue, nulla velit varius nisi, vel fermentum tortor velit ut nibh.Nam lobortis in velit non tempus. Phasellus lobortis vel neque non iaculis. Praesent tristique risus a gravida imperdiet. Quisque fringilla, massa quis placerat congue, nulla velit varius nisi, vel fermentum tortor velit ut nibh.Nam lobortis in velit non tempus. Phasellus lobortis vel neque non iaculis. Praesent tristique risus a gravida imperdiet. Quisque fringilla, massa quis placerat congue, nulla velit varius nisi, vel fermentum tortor velit ut nibh.
</p>

Answer 2

您可以通过添加：before元素来固定高度

本文中的更多示例-http://www.benknowscode.com/2014/01/css-rotated-text-parent-dimensions-and-spacing-issues.html

请检查此代码段-

    <html>
  <h1>
    Test Heading
  </h1>
  <p>
        HLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam metus, mollis eu purus vitae, semper fermentum nunc. Phasellus nec iaculis sem, in imperdiet eros. Maecenas ligula nibh, elementum in felis eget, vehicula faucibus nibh. Morbi rhoncus vehicula feugiat. Pellentesque vitae lobortis arcu. Nullam vel mi elementum mi feugiat vehicula. Cras tincidunt purus dolor, eleifend aliquet velit ornare tristique. Maecenas lobortis tristique est, sed facilisis lectus pulvinar vestibulum. Nunc tristique tellus non facilisis elementum. Nam lobortis in velit non tempus. Phasellus lobortis vel neque non iaculis. Praesent tristique risus a gravida imperdiet. Quisque fringilla, massa quis placerat congue, nulla velit varius nisi, vel fermentum tortor velit ut nibh.
          HLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam metus, mollis eu purus vitae, semper fermentum nunc. Phasellus nec iaculis sem, in imperdiet eros. Maecenas ligula nibh, elementum in felis eget, vehicula faucibus nibh. Morbi rhoncus vehicula feugiat. Pellentesque vitae lobortis arcu. Nullam vel mi elementum mi feugiat vehicula. Cras tincidunt purus dolor, eleifend aliquet velit ornare tristique. Maecenas lobortis tristique est, sed facilisis lectus pulvinar vestibulum. Nunc tristique tellus non facilisis elementum. Nam lobortis in velit non tempus. Phasellus lobortis vel neque non iaculis. Praesent tristique risus a gravida imperdiet. Quisque fringilla, massa quis placerat congue, nulla velit varius nisi, vel fermentum tortor velit ut nibh.
  </p>
</html>

h1 {
   display: inline-block;
   white-space: nowrap;
   transform: translate(0,90%) rotate(-60deg);
   transform-origin: 0 0;
   float: left;
}
h1:before {
   content: "";
   float: left;
   margin-top: 100%;
}

http://jsfiddle.net/nudv9z43

Answer 3

添加了一些带有三角形的“ hack”，希望对您有所帮助-

<html>
  <div class="wrap">
  <h1>
    Test Heading Y
  </h1>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
  <div class="four"></div>
  <div class="five"></div>
  <p>
        HLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam metus, mollis eu purus vitae, semper fermentum nunc. Phasellus nec iaculis sem, in imperdiet eros. Maecenas ligula nibh, elementum in felis eget, vehicula faucibus nibh. Morbi rhoncus vehicula feugiat. Pellentesque vitae lobortis arcu. Nullam vel mi elementum mi feugiat vehicula. Cras tincidunt purus dolor, eleifend aliquet velit ornare tristique. Maecenas lobortis tristique est, sed facilisis lectus pulvinar vestibulum. Nunc tristique tellus non facilisis elementum. Nam lobortis in velit non tempus. Phasellus lobortis vel neque non iaculis. Praesent tristique risus a gravida imperdiet. Quisque fringilla, massa quis placerat congue, nulla velit varius nisi, vel fermentum tortor velit ut nibh.
         HLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam metus, mollis eu purus vitae, semper fermentum nunc. Phasellus nec iaculis sem, in imperdiet eros. Maecenas ligula nibh, elementum in felis eget, vehicula faucibus nibh. Morbi rhoncus vehicula feugiat. Pellentesque vitae lobortis arcu. Nullam vel mi elementum mi feugiat vehicula. Cras tincidunt purus dolor, eleifend aliquet velit ornare tristique. Maecenas lobortis tristique est, sed facilisis lectus pulvinar vestibulum. Nunc tristique tellus non facilisis elementum. Nam lobortis in velit non tempus. Phasellus lobortis vel neque non iaculis. Praesent tristique risus a gravida imperdiet. Quisque fringilla, massa quis placerat congue, nulla velit varius nisi, vel fermentum tortor velit ut nibh.
          HLorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam metus, mollis eu purus vitae, semper fermentum nunc. Phasellus nec iaculis sem, in imperdiet eros. Maecenas ligula nibh, elementum in felis eget, vehicula faucibus nibh. Morbi rhoncus vehicula feugiat. Pellentesque vitae lobortis arcu. Nullam vel mi elementum mi feugiat vehicula. Cras tincidunt purus dolor, eleifend aliquet velit ornare tristique. Maecenas lobortis tristique est, sed facilisis lectus pulvinar vestibulum. Nunc tristique tellus non facilisis elementum. Nam lobortis in velit non tempus. Phasellus lobortis vel neque non iaculis. Praesent tristique risus a gravida imperdiet. Quisque fringilla, massa quis placerat congue, nulla velit varius nisi, vel fermentum tortor velit ut nibh.
  </p>
  </div>
</html>

h1 {
   display: inline-block;
   white-space: nowrap;
   transform: translate(0,90%) rotate(-25deg);
   transform-origin: 0 0;
   position: absolute;
   left: 0;
   top: 22px;
}
.wrap {
  position: relative;
}
.wrap > div {
  height: 22px;
  float: left;
  width: 250px;
  clear: both;
}
.wrap .two {
  width: 200px;
}
.wrap .three {
  width: 150px;
}
.wrap .four {
  width: 100px;
}
.wrap .five {
  width: 50px;
}

http://jsfiddle.net/nudv9z43/20/

在旋转Div周围换行

3 个答案: