How to avoid line breaking of the text?

Question

I've noticed that there's a line break occurring in the content__date when the browser is in mobile view. I tried to add another container for the content__date but it is not working. Any ideas would be appreciated.~ I am totally new in web development please bear with me.

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

Maybe you can make the font size smaller on smartphone, for example `@media (max-width: 480px) { .content__date {font-size: 90%;} }` . Put this after the `.content__date { }` in your stylesheet. — bron, Jan 07 '21 at 16:45

score 2 · Accepted Answer · answered Jan 07 '21 at 16:45

Use the property white-space to prevent line break. Default value is normal

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

You can set it to nowrap so the text won't wrap to the next line until there's a <br> tag.

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

score 1 · Answer 2 · answered Jan 07 '21 at 16:45

1

You can prevent in general text wrapping for this element by setting for .content__date in css

white-space: nowrap;

answered Jan 07 '21 at 16:45

Alex Andre

1,006
1
7
7

How to avoid line breaking of the text?

2 Answers2