Question

我试图旋转文字并缩小到一个新的宽度以适应容器，但是当我这样做时，阻止宽度会破坏我的计划，我对此感到麻烦。我尝试使用的代码是：

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

在整页中查看我的问题：

＆＃13;

/** 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%;
}

＆＃13;

<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>

＆＃13;

就像你可以看到的那样，H2的宽度会破坏所有下一个文本，我该如何解决这个问题呢？我已经尝试过所有的知识......谢谢

Answer 1

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

＆＃13;

/** 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);
}

＆＃13;

<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>

＆＃13;

旋转文本保持宽度

1 个答案: