0
テキストを回転して新しい幅に縮小してコンテナに収まるようにしようとしていますが、そのときブロックが幅を維持してしまいます。私が使用しようとしているコードがある：あなたが見ることができるようテキストを回転すると幅が保持されます
/** 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 piraticallyの幅：
.text90 {
display: inline-block;
white-space: nowrap;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
は私の問題を調べるために、全ページでこれを見て次のすべてのテキストを破壊しますが、どうすればこの問題を解決できますか？私はすでに私の知識をすべて試しました...ありがとう