Geek asks and answers

Prevent line breaks between two elements

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

I set the div width to 20 pixels specifically to explain what I need.
How can I prevent the submit button from breaking the line?
I want both controls to be as one without line breaks. How can i do this?

+3
source share
3 answers

How can I prevent the submit button from breaking the line?

C white-space: nowrap;in parent <div> See updated jsfiddle .

+9
source

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

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

@BalusC (, html, JavaScript), :

.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>
Hide result
0

More articles:


All Articles