javascript - 旋转文本保持宽度

Question

我正在尝试旋转文本并缩小到新的宽度以适合容器，但是当我这样做时， block 保持宽度破坏了我的计划，我遇到了麻烦。我尝试使用的代码是:

.text90 {
  display: inline-block;
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

在整页中查看我的问题:

/** RESET PAGE DOWNHERE **/
@import url("https://fonts.googleapis.com/css?family=Droid+Serif:400,400i,700,700i|Montserrat:400,700|Open+Sans|Source+Sans+Pro:400,900");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: 400;
  font-size: 14px;
}

ul, li, ol, a {
  text-decoration: none;
  list-style-type: none;
}

.container {
  width: 100%;
  max-width: 1270px;
  margin: auto;
  padding: 0 15px;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #252525;
}

h3 {
  font-family: "Droid Serif", serif;
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 4px;
  margin-bottom: 15px;
}

p {
  font-family: "Droid Serif", serif;
  font-size: 14px;
  line-height: 26px;
  color: #898989;
  letter-spacing: 1px;
  text-align: justify;
}

.header {
  height: 150px;
  background-color: lightpink;
}

.footer {
  height: 50px;
  background-color: lightpink;
}
/** RESET PAGE UPHERE **/

.content {
  padding: 50px 0;
  display: flex;
  background-color: lightblue;
}

.text90 {
  display: inline-block;
  white-space: nowrap;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

<div class="header container"></div>
<div class="content container">
  <h2 class="text90">Title Example</h2>
  <div class="insideContent">
    <h3>Other Title Example</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae cum qui error incidunt animi, aliquid fugit quae! Quia necessitatibus dolore temporibus unde voluptas optio, beatae eos neque ipsum, suscipit at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam numquam perferendis mollitia temporibus quidem, id molestias distinctio ex magnam magni, voluptatum exercitationem esse quibusdam nostrum nobis libero excepturi cupiditate qui? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat expedita odit minus nulla quas, consequuntur repellendus voluptatem, ratione, libero cupiditate voluptas quod facilis nisi ipsum alias. Dolorum reprehenderit quod aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nisi odio delectus, illum incidunt atque iste, eveniet velit dicta quasi saepe, quibusdam accusantium excepturi sit ipsum distinctio dolore obcaecati soluta!</p>
  </div>
</div>
<div class="footer container"></div>

如您所见，H2 的宽度盗版地破坏了所有下边文字，我该如何解决这个问题？我已经尝试了我所有的知识......谢谢

Answer 1

你可以试试这个writing-mode: vertical-lr;。但这将从上到下开始文本，因此需要重新旋转到 180deg。

/** RESET PAGE DOWNHERE **/
@import url("https://fonts.googleapis.com/css?family=Droid+Serif:400,400i,700,700i|Montserrat:400,700|Open+Sans|Source+Sans+Pro:400,900");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: 400;
  font-size: 14px;
}

ul, li, ol, a {
  text-decoration: none;
  list-style-type: none;
}

.container {
  width: 100%;
  max-width: 1270px;
  margin: auto;
  padding: 0 15px;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #252525;
}

h3 {
  font-family: "Droid Serif", serif;
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 4px;
  margin-bottom: 15px;
}

p {
  font-family: "Droid Serif", serif;
  font-size: 14px;
  line-height: 26px;
  color: #898989;
  letter-spacing: 1px;
  text-align: justify;
}

.header {
  height: 150px;
  background-color: lightpink;
}

.footer {
  height: 50px;
  background-color: lightpink;
}
/** RESET PAGE UPHERE **/

.content {
  padding: 50px 0;
  display: flex;
  background-color: lightblue;
}

.text90 {
  display: inline-block;
  white-space: nowrap;
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
  -o-writing-mode: vertical-lr;
  transform: rotate(180deg);
}

<div class="header container"></div>
<div class="content container">
  <h2 class="text90">Title Example</h2>
  <div class="insideContent">
    <h3>Other Title Example</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae cum qui error incidunt animi, aliquid fugit quae! Quia necessitatibus dolore temporibus unde voluptas optio, beatae eos neque ipsum, suscipit at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam numquam perferendis mollitia temporibus quidem, id molestias distinctio ex magnam magni, voluptatum exercitationem esse quibusdam nostrum nobis libero excepturi cupiditate qui? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat expedita odit minus nulla quas, consequuntur repellendus voluptatem, ratione, libero cupiditate voluptas quod facilis nisi ipsum alias. Dolorum reprehenderit quod aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nisi odio delectus, illum incidunt atque iste, eveniet velit dicta quasi saepe, quibusdam accusantium excepturi sit ipsum distinctio dolore obcaecati soluta!</p>
  </div>
</div>
<div class="footer container"></div>