make the whole word go to the next line instead of snapping them in half

Question

Okay so I have displayed 2 viewports, on desktop it looks fine, but on mobile as you can see, it breaks the word in half, what do i mean? okay this is how it displays "this is a text" on desktop:

this is a text this is a text this is a text this is a text

and on mobile

this is a text this
is a text this is a
text this is a text

if you still dont understand what i mean, basically breaking in half means a part of the text stays on a different line than another part's:

this is a
text

instead of having them breaking in half, i would like to make them stay as a whole word, if the leftover space isn't enough to display the whole text, then instead of breaking like:

this is a text this
is a text this is a
text this is a text

i want them to go to the next line as a whole text

this is a text 
this is a text 
this is a text
this is a text

while some people may tell me to use white-space, it does exactly what i dont want it to do, snaps them in half

body {
  display: flex;
}

.browser {
  margin: 10px;
}

.browser#a {
  background-color: red;
  width: 60%;
}

.browser#b {
  background-color: green;
  width: 15%
}

.words {
    margin-left: 10px;
}

.words strong{
    color: white;
    background-color: blue;
    padding: 4px;
    border-radius: 5px;
    margin-right: 0.5%;
    font-size: 1.4rem;
}

<div class='browser' id='a'>
  <h2>Desktop browser viewport</h2>
  <h1 class='words'>
    <strong>this is a text</strong>
    <strong>this is a text</strong>
    <strong>this is a text</strong>
    <strong>this is a text</strong>
  </h1>
</div>

<div class='browser' id='b'>
  <h2>Mobile browser viewport</h2>
  <h1 class='words'>
    <strong>this is a text</strong>
    <strong>this is a text</strong>
    <strong>this is a text</strong>
    <strong>this is a text</strong>
  </h1>
</div>

score 0 · Answer 1 · answered May 29 '21 at 05:04

Bro, use display:inline-block. Your words won't break.

body {
  display: flex;
}

.browser {
  margin: 10px;
}

.browser#a {
  background-color: red;
  width: 60%;
}

.browser#b {
  background-color: green;
  width: 15%
}

.words {
    margin-left: 10px;
}

.words strong{
    color: white;
    background-color: blue;
    padding: 4px;
    border-radius: 5px;
    margin-right: 0.5%;
    font-size: 1.4rem;
   display: inline-block;
}

<div class='browser' id='a'>
  <h2>Desktop browser viewport</h2>
  <h1 class='words'>
    <strong>this is a text</strong>
    <strong>this is a text</strong>
    <strong>this is a text</strong>
    <strong>this is a text</strong>
  </h1>
</div>

<div class='browser' id='b'>
  <h2>Mobile browser viewport</h2>
  <h1 class='words'>
    <strong>this is a text</strong>
    <strong>this is a text</strong>
    <strong>this is a text</strong>
    <strong>this is a text</strong>
  </h1>
</div>

make the whole word go to the next line instead of snapping them in half

1 Answers1