[ANSWERED] html – How to avoid line breaking of the text?

Question 1

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

Question 2

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

white-space: nowrap;

Question 3

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>

Bollate

[ANSWERED] html – How to avoid line breaking of the text?

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by bron

By

Related Post

[ANSWERED] html – Child div has an offset border

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] problem in selecting list item in html/css

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate