CSS: Cómo evitar que un botón se «rompa»

Recientemente tuve problemas con un enlace que simula ser un botón en una página web. El problema ocurre porque la página se ajusta al ancho de la ventana del navegador, permitiendo que los elementos dentro de ella también se ajusten, pero a la vez forzando a que el botón se rompa en dos líneas cuando la ventana se reduce, de esta forma:

La solución a este problema es utilizar dentro de los estilos del botón la propiedad white-space con el valor nowrap que le indica al navegador que el texto dentro de ese elemento no debe ajustarse. Esta propiedad es el equivalente CSS a la propiedad no break de los estilos de InDesign.

a.boton {
  color:#51626f;
  background:#e8eaec;
  border:solid 1px #51626f;
  white-space:nowrap;
  /* (...) */
}

Esta solución da como resultado que igual se utilicen dos líneas para los botones, pero evita que se rompa el botón:

Vale aclarar que este problema no es común en páginas web con ancho fijo o con botones de medidas especificas, y por esta misma razón la propiedad white-space tampoco es muy conocida, sin embargo, es compatible con la mayoría de navegadores recientes y puede aplicarse a otros elementos.