Как изменить количество слов в div в зависимости от его ширины?

Question

[dm_black]

Есть кнопка:

<div id="regbox">
	LOGIN or REGISTER
</div>

#regbox {
	position: absolute;
	height: 100%;
	width: 12.9%;
	left: 71.4%;
	border-left: solid 2px #383838;
	border-right: solid 2px #383838;
	text-align: center;
	font: 11px Arial, Tahoma, Geneva, sans-serif;
	color: #747474;
	line-height: 400%;
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

Когда ширина позволяет, выводит: Login or register
Когда ширина экрана уменьшается, оно выводит: Login or (перенос строки) register
Еще уменьшая: Login (перенос строки) or register
Как пропустить первый вариант?
То бишь, как только все целиком не помещается - оставляет только одно слово в строке.

Answer 1

[Андрей]

Попробуйте неразрывный пробел:
Login or register

Answer 2

[Дмитрий]

Как вариант css white-space: nowrap