How do I break a sentence using CSS?

user_851097 0
Viewed 149

I'm trying to break a sentence using CSS. I don't want to break the words, but break the sentence. So for example if there's a sentence like Hello world it's test. It should not break any of the words in that sentence and put it in a new line. It should only put new words in a new line. Here's the CSS that I have so far:

enter image description here

See attached image. Notice our some words break apart? I want a new word in a new line, not the characters in a single word to break.

.Main_Topics {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.546) 0%, rgba(0, 0, 0, 0.539) 23.54%, rgba(0, 0, 0, 0.469) 46.07%, rgba(0, 0, 0, 0) 58.09%), url(/assets/jerry.jpg);
  border-radius: 18px;
  min-height: 424px;
  width: 100%;
  color: white;
  padding: 47px 34px;
  margin: 120px auto;
  text-align: left;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right top;
}

.Main_Topics h2 {
  font-size: 40px;
  margin-bottom: 30px;
}

.Main_Topics p {
  max-width: 552px;
  margin-bottom: 40px;
}

.Main_Topics .topic {
  background: #FFFFFF;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  padding: 34px;
  height: 150px;
  text-align: center;
  font-size: 14px;
  color: #000000;
  ;
}

.category-wrapper {
  position: relative;
  max-width: 100%;
  height: 150px;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: hidden;
}

.category-wrapper ul {
  height: 150px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.category-wrapper .topic {
  display: inline-block;
  width: 140px;
  height: 150px;
  margin-right: 26px;
  overflow-wrap: normal;
  vertical-align: top;
}

.category-wrapper .topic div {
  word-wrap: break-word;
  /* IE 5.5-7 */
  white-space: -moz-pre-wrap;
  /* Firefox 1.0-2.0 */
  white-space: pre-wrap;
  /* current browsers */
  font-size: 14px;
  height: 150px;
}

.paddle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3em;
  background: transparent;
  border: none;
}

.left-paddle {
  left: 0;
  background: transparent;
  border: none;
}

.right-paddle {
  right: 0;
  background: transparent;
  border: none;
}
<div class="row Main_Topics">
  <h2>What do you need help with?</h2>
  <p>Our experts are one Zoom call area. They'll give you honest advice. No BS. Straightforward and to the point.</p>
  <div class="category-wrapper">
    <ul>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
      <li class="topic">
        <div>{{name}}</div>
      </li>
    </ul>
    <div class="paddles">
      <button class="left-paddle paddle hidden">
                                <img src="/assets/paddle-left.svg" />
                            </button>
      <button class="right-paddle paddle">
                                <img src="/assets/paddle-right.svg" />
                            </button>
    </div>
  </div>
</div>

css html
2 Answers

You defined white-space: nowrap;for your .category-wrapper ul which apparently also applies this setting to its li children. To avoid that, add white-space: normal; to the children ( .category-wrapper .topic)

user_56416690

Well, while this is not the pretties solution. You can make the word-spacing property to some big value. Like 100vw since that would make it 100% of the view width. Making it so every word has to wrap.

.txt {
  word-spacing: 100vw;
}
<h1 class="txt">This should work</h1>

Found the answer from here Can CSS force a line break after each word in an element?

user_181004350
Related