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 пиратских разрушает весь следующий текст, как я могу это исправить? Я уже пробовал все свои знания ... Спасибо