CODEWITHSUNDEEP
htmlcss
vanduzled
vanduzled

Reputation: 300

Make two words stick together on responsive design

I have two words that needs to stick together all the time because it's the name of the company. The company's name is, for example, S Overflow. Sometimes, The second word 'Overflow' goes down on second paragraph on certain screen widths.

Lorem ipsum dolor sit ammet met S
Overflow consectidur

Is there a way that no matter the screen size is, those two words will come stick together as one all the time?

Lorem ipsum dolor sit ammet met S Overflow
consectidur

Upvotes: 1

Views: 4877

Answers (4)

lukeocom
lukeocom

Reputation: 3243

you might be able to create some css rules to control the company name that is contained within a span tag with a fixed width and display set to block.

<span class="cName">company name</span>

check a fiddle here

Another approach would be to use media queries to ensure the company name appears on one line across different device sizes.

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201678

If it’s a matter of two words separated by a space, with no special characters (like hyphens) involved, the simplest and most robust way is to use a no-break space, e.g.

S&nbsp;Overflow

You can alternatively wrap the name in an element and set white-space: nowrap on it. This is convenient if the name is wrapped in an element anyway, e.g. for styling.

Upvotes: 6

Akshay
Akshay

Reputation: 14358

You can use 

white-space:nowrap;

Upvotes: 1

Esko
Esko

Reputation: 4207

I think what you mean is white-space: nowrap in css:

Css:

.doNotWrap {
   white-space: nowrap;
}

Html:

Lorem ipsum dolor sit ammet met <span class="doNotWrap">S Overflow</span>
consectidur

Upvotes: 1

Related Questions