CODEWITHSUNDEEP
htmlcss
Onii-Chan
Onii-Chan

Reputation: 57

preventing text from breaking to half

Here is what I mean

h1 {
  color: grey;
  background-color: black;
  padding: 10px;
  
  width: 100px;
}

h1 strong {
  background-color: white;
  color: black;
}

h2 {
  color: grey;
  background-color: black;
  padding: 10px;
  
  width: 200px;
}

h2 strong {
  background-color: white;
  color: black;
}

h3 strong {
  background-color: black;
  color: white;
}
<h1>
  Dont want:<br>
  <strong>hello</strong>
  <strong>hello world</strong>
</h1>
<h2>
  Want:<br>
  <strong>hello</strong>
  <strong>hello world</strong>
</h2>
<h3>Basically i dont want "hello world" to break into 1 word, i want them to be <br><strong>hello world</strong><br> not <br><strong>hello<br>world</strong></h3>

i have made a codepen too: https://codepen.io/ivan-da-dev/pen/NWpvprr as the above stated, i don't want my text to snap in half, if the text is too long for the parent, i want the whole text to go to the text line, i don't want only 1 word to go to the next line

Upvotes: 0

Views: 43

Answers (3)

Andrew Ymaz
Andrew Ymaz

Reputation: 2203

One of the option could be to modify your h1 style as the following:

h1 {
  color: grey;
  background-color: black;
  padding: 10px;
  white-space: nowrap;
  display: inline-block;
}

With white-space: nowrap; which prevents line break with space between words and display: inline-block; to match the style of your h2 element, to wrap with background the length of the words, no the whole line block.

Upvotes: 0

Sven Eberth
Sven Eberth

Reputation: 3115

Add a non-breaking space &nbsp; between the words.

<p>
hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world 
hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world hello&nbsp;world 
</p>
vs.
<p>
hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world
</p>

Upvotes: 2

SebMaz
SebMaz

Reputation: 608

add this css property to the element you want to keep on one line white-space: nowrap

h1 {
  color: grey;
  background-color: black;
  padding: 10px;
  
  width: 100px;
  white-space: nowrap;
}

h1 strong {
  background-color: white;
  color: black;
}

h2 {
  color: grey;
  background-color: black;
  padding: 10px;
  
  width: 200px;
}

h2 strong {
  background-color: white;
  color: black;
}

h3 strong {
  background-color: black;
  color: white;
}
<h1>
  Dont want:<br>
  <strong>hello</strong>
  <strong>hello world</strong>
</h1>
<h2>
  Want:<br>
  <strong>hello</strong>
  <strong>hello world</strong>
</h2>
<h3>Basically i dont want "hello world" to break into 1 word, i want them to be <br><strong>hello world</strong><br> not <br><strong>hello<br>world</strong></h3>

Upvotes: 1

Related Questions