Тянущиеся блоки

[Z1gnet]

Всем привет. Столкнулся с такой проблемой

 

http://take.ms/7rC84есть конструкция из 3х частей. все три могут динамически менять ширину. изначально должно все выглядеть как на скрине выше, тоесть растягиваться на ширину контента блоков. при изменении контента все должно красиво тянуться, вот так - http://take.ms/MOUFg

тут все ясно, куча вариантов реализации... но дальше начинается веселье. важно что здесь текст должен быть только в одну строку.

при достижении ширины родительского блока наша конструкция должна перестать увеличиваться в ширине (ну типа max-width:100%) и в центральной колонке текст который не влазит должен обрезаться и ставится в конце троеточие, типа так - http://take.ms/LCpGk

на первый взгляд простая задача, но не так все просто как казалось. перепробовал кучу вариантов (таблица, инлайн-блок, флоат) но всегда какаето бочина вылазит. с таблицей либо вылазит за пределы родительского блока, либо , если поставить table-layout: fixed, крайние колонки тоже растягиваются, а они должны быть по ширине контента.

возможно кто-то подскажет красивое решение.  решение нужно на цсс, без всяких скриптов. браузеры самые последние.

 

всем спасибо.

[murovey]

Привет. И вправду задача не очень легкая как можно подумать на первый взгляд. По крайней мере для начинающего верстальщика.

Вот что у меня в итоге получилось http://codepen.io/anon/pen/WvoMVw может вам подойдет такое решение и вы подгоните его под себя.

Как минимум это вариант =)

Edited May 26, 2015 by murovey

[Z1gnet]

спасибо. но это не совсем то. в вашем примере все завязано на max-width на центральном блоке. а я его не знаю. оно может быть как 500рх, так и 800рх, в зависимости от ситуации. вообще-то я могу легко сделать все пункты которые описал, но не будет троеточия в конце. а если будет троеточие, то будут другие баги... короче походу придется костылять и надеяться что не развалится

[murovey]

спасибо. но это не совсем то. в вашем примере все завязано на max-width на центральном блоке. а я его не знаю. оно может быть как 500рх, так и 800рх, в зависимости от ситуации. вообще-то я могу легко сделать все пункты которые описал, но не будет троеточия в конце. а если будет троеточие, то будут другие баги... короче походу придется костылять и надеяться что не развалится

Указать размеры в %