CODEWITHSUNDEEP
htmlcss
Naor
Naor

Reputation: 24103

prevent linebreaks between two elements

I have this html with css: http://jsfiddle.net/krhxG/

I set the width of the div to 20px in purpose in order to explain what I need.
How can I prevent from the submit button to break the line?
I want both the controls to be as one without line breaks at all. How can I do it?

Upvotes: 3

Views: 2722

Answers (3)

hugo der hungrige
hugo der hungrige

Reputation: 12902

Expanding on @BalusC answer in some weird cases (e.g. html generated and inserted by JavaScript) you also may want to try to insert a zero width joiner:

.wrapper{
  width: 290px;   
  white-space: no-wrap;
  resize:both;
  overflow:auto; 
  border: 1px solid gray;
}

.breakable-text{
  display: inline;
  white-space: no-wrap;
}

.no-break-before {
  padding-left: 10px;
}
<div class="wrapper">
<span class="breakable-text">Lorem dorem tralalalala LAST_WORD</span>&#8205;<span class="no-break-before">TOGETHER</span>
</div>

Upvotes: 0

Jage
Jage

Reputation: 8096

In your container div, you need a white-space property:

<div style="white-space:nowrap;">
<input type="text" /><input type="submit" value=""/>
</div>

Upvotes: 1

BalusC
BalusC

Reputation: 1109715

How can I prevent from the submit button to break the line?

With a white-space: nowrap; on the parent <div> See updated jsfiddle.

Upvotes: 10

Related Questions