0
我想旋轉文本並縮小到適合容器的新寬度，但是當我這樣做時，塊會使寬度損壞我的計劃，我遇到了麻煩。我試圖使用的代碼是：旋轉文本保持寬度
.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的寬度補種破壞所有下面的文字，我該如何解決這個問題？我已經嘗試了我所有的知識......謝謝