如何避免文本的换行？ [复制]答案

【问题标题】：How to avoid line breaking of the text? [duplicate]如何避免文本的换行？ [复制]
【发布时间】：2021-04-13 09:50:10
【问题描述】：

我注意到当浏览器处于移动视图时，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>

【问题讨论】：

也许您可以在智能手机上将字体变小，例如 @media (max-width: 480px) { .content__date {font-size: 90%;} } 。将其放在样式表中的 .content__date { } 之后。

标签： html css web sass responsive

【解决方案1】：

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

white-space: normal: 空白序列将折叠成一个空白。文本将在必要时换行。这是默认的

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

white-space: no-wrap: 空白序列将折叠成一个空白。文本永远不会换行到下一行。文本在同一行继续，直到遇到
标记

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

W3schools - CSS white-space property

MDN - CSS white-space property

【讨论】：

【解决方案2】：

您可以通过在 css 中设置 .content__date 来阻止此元素的一般文本换行

white-space: nowrap;

【讨论】：