如何避免文本换行？

Question

我注意到当浏览器处于移动视图时，content__date 中出现换行符。我试图为 content__date 添加另一个容器，但它不起作用。任何想法将不胜感激。~我在网络开发方面是全新的，请多多包涵。

.content__item {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     height: 100vh;
     width: 100vw;
     color: black;
     font-family: sans-serif;
     margin: 0;
}
 .content .p {
     margin: 0;
}
 .content__wrapper {
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
     max-width: 600px;
}
 .content__date {
     display: flex;
     transform: rotate(-90deg);
     border-bottom: 2px solid black;
     padding-left: 3rem;
}
 .content__category-wrapper {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
     margin-left: -3.25rem;
     margin-top: -3rem;
}
 .content__category {
     padding-bottom: 1rem;
}
 .content__category-text {
     padding-left: 1rem;
}
 .content__title-line {
     border-top: 2px solid black;
     margin-left: 0.5rem;
     padding-left: 20rem;
}
 .content__title {
     padding-top: 1rem;
     padding-left: 20px;
     font-size: 18px;
}

<div class="content__item">
  <div class="content__wrapper">
    <div class="content__date">
      <p class="content__date-text">June 7, 1941</p>
    </div>
    <div class="content__category-wrapper">
      <div class="content__category"></div>
      <p class="content__category-text">Some text here</p>
      <div class="content__title-line"></div>
      <p class="content__title">Another text here</p>
    </div>
  </div>
</div>

Answer 1

使用属性 white-space 来防止换行。默认值为 normal

white-space: normal: Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default

您可以将其设置为 nowrap，这样在出现 <br> 标记之前文本不会换行到下一行。

white-space: no-wrap: Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a
tag is encountered

p.my-selector{
  white-space: no-wrap;
}

W3schools - CSS white-space property

MDN - CSS white-space property

Answer 2

您可以通过在 css

中设置 .content__date 来阻止此元素的常规文本换行

white-space: nowrap;

如何避免文本换行？

How to avoid line breaking of the text?

html

css

sass

web

responsive