CODEWITHSUNDEEP
htmlcssdom
svey
svey

Reputation: 115

How to prevent word wrap using CSS for a specific group of words on the DOM?

I have a series of input labels: 

    <label>
      <abbr>*</abbr>
      Label Text Here
    </label>

On browser resize some labels wrap like this:
* Label Text Here

Ideally text should not break between the asterisk and the first word-- like so:

* Label Text Here

I can't use &nbsp;/change the HTML because my inputs and labels are automatically generated and I don't have control over the HTML output. I'm looking for pure CSS solution. Thank you in advance!

Upvotes: 1

Views: 856

Answers (1)

Gautam Naik
Gautam Naik

Reputation: 9348

Add white-space: nowrap; to label

This will not wrap your text on to next line.

label {
  white-space: nowrap;
}
<label>
      <abbr>*</abbr>
      Label Text Here
    </label>

Upvotes: 1

Related Questions