Перенос текста при абсолютном позицировании

[andrew_basta]

В общем искал объяснение в инете, и ничего попутного не нашел. Проблема собственна решена, но не понятна причина. Есть у меня кнопка, которая спозиционирована внутри родительского контейнера абсолютно. Только вот когда, макет у меня ужимается до мобильных разрешений, текст кнопки переносится на след. строку, хотя места вокруг достаточно, для расположения текста в одну линию(на прикрепленном к посту скрине, показано это странное поведение).

Проблема, из-за чего возникает такое поведение возникает из-за этих двух строчек:

    left: 50%;
    transform: translateX(-50%);

если их убрать, то текст кнопки в одну располагается в одну линию. Вот полный пример . Данная проблема решается, если задать кнопке white-space: nowrap. 

Собственно вопрос почему все таки при центрировании через absolute: position текст у нас переносится на новую строку, хотя места у нас вполне хватает. Ширину кнопке явно я не задаю, т.к. текст может быть произвольной длины.

Edited October 7, 2016 by andrew_basta

[ows.nightwolf]

Рендеринг вашего элемента происходит по следующему сценарию:

1. Расчет его габаритов: т.к. ширина элементу не задана (т.е. принято значение по умолчанию width = auto) то его ширина расчитывается автоматически (в частности на основании свойств left/right и ширины текста, вмещаемого в элемент). Т.к. текст у нас может переносится на другие строки, то при расчете ширины он не учитывается, а т.к. position = absolute, то в расчет ширины принимаются значения left и right. Left у вас равен 50%, для right принимается значение по умолчанию равное нулю. Итого: если левая граница элемента лежит на середине родителя, а правая на правой границе родителя, то ширина элемента получится равной 50% от ширины родителя. Ширина элемента расчитана и больше не меняется.
2. Применение css-свойства transform: директива translateX(-50%) означает что надо сдвинуть элемент влево на 50% его ширины. При этом после сдвига его ширина, расчитаная в п.1 по новой не пересчитывается (естественно, ведь если изменится ширина, то изменится и величина сдвига, в результате долнжна снова изменится ширина и т.п. рекурсивно и бесконечно). 

Итого: у нас получился центрированный элемент, ширина которого = 50% от ширины родителя, и из-за этого текст в элемент не влазит и переносится (хотя казалось бы - кругом еще полно места...)
Ну а по поводу white-space: свойство nowrap запрещает перенос текста, так что при расчете ширины элемента у которого width=auto браузер вынужден принимать во внимание и ширину теста, который находится в этом элементе. И при этом если текст больше, чем ширина расчитаная в п.1, то ширина элемента увеличивается так чтобы вместить текст полностью. После этого выполняется п.2.