Buenas, para quien tenga interés en esto que se comentaba, he hecho pruebas en varios navegadores (Firefox, Chrome, Explorer) y en todos he obtenido el mismo resultado: el texto aparece correctamente alineado, excepto cuando se reduce el tamaño de la ventana a un tamaño tal que la línea no cabe en una sola línea, y al generarse el salto de línea se produce la desalineación. En el caso de la web JSFiddle es precisamente esto lo que ocurre: los resultados se muestran sobre un frame de dimensiones muy reducidas, y debido a ello el contenido no puede visualizarse en una sola línea, generándose el salto de línea y la desalineación, que en caso de usarse un frame de mayores dimensiones no se produciría. En el curso CSS (
https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203) se comenta una opción que puede ser útil en <<CSS text-align, color, text-decoration, text-indent, white-space nowrap, pre, pre-wrap, pre-line (CU01040D)>>
En el código habría que añadir la opción nowrap así:
.oculto1,.oculto2,.oculto3{
white-space:nowrap;
margin-left: 1%;
display: none;
}
Esto evita que al no haber espacio disponible la línea se divida en dos, es decir, la línea se mantiene siempre como una única línea (alineada), haya espacio suficiente o no.
Salu2