Prevent break line in URL

Question

how can I prevent line break in a URL in Mozilla Firefox. With using CSS white-space: nowrap; ? Any other solutions? Thanx.

http://codepen.io/anon/pen/VeNJKW

.container {
  width:  275px;
  padding: 10px;
  border: 1px solid black;
}

.nowrap {
  white-space: nowrap;
}

<div class="container"> 
  This is a URL: <span class = "">http://www.google.com/helloworld</span>
</div>

Answer 1

nowrap style is not applied in your code, should be:

This is a URL: <span class = "">http://www.google.com/helloworld</span>

->

This is a URL: <span class = "nowrap">http://www.google.com/helloworld</span>

Answer 2

do you mean something like that?

.container {
  width:  275px;
  padding: 10px;
  border: 1px solid black;
  overflow: visible;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.nowrap {
  white-space: nowrap;
}

http://codepen.io/sheldonled/pen/eJoqWR