Появилась идея реализовать резиновые табы (как вкладки в браузере), но вот не могу понять, как на CSS реализовать следующее:
1. Допустим, есть некий блок с табами, таб имеет ширину 100px:
2. При переполнении блока, табы начинают ужиматься:
3. Если текст в табе не помещается, то он начинает переходить в "точки" (text-overflow: ellipsis). Вот как раз с этим шагом возникли проблемы, блок начинает выезжать за родительский, текст внутрь таба уходить не хочет. Вот так должно выглядеть в идеале:
Вот что набросал:
http://jsfiddle.net/gszhxvp4/
Можно ли осуществить мою задумку с помощью CSS? А то в JS это описывать не хочется.
P.S.: флекс не предлагать, кучу вложенных тэгов не сувать.
Заранее благодарю за любую помощь и подсказки.