Обтекание текста в DIV с эллипсов (+ падение обертывание плавающей DIV)

Question

Ok стучал головой о стол на некоторое время с этим .. хочу достичь следующего

1) заголовок (СЧА) должен быть одна строка без обертывания (это включает в себя nav-back, nav-title & nav-next)

2) когда вы сокращаете окно, название должно быть сокращено И, когда окно не позволяет отображать все текст должен быть обрезан с помощью эллипсов (например, «Это тоже слишком ...»)

Вот чем я работаю:

<div class="nav"> 
<div class="nav-back"><</div> 
<div class="nav-title"> 
    <div class="nav-main-title">Want this no-wrap with ellipses</div> 
    <div id="default-page-sub-title" class="nav-sub-title">Same here</div> 
</div> 
<div class="nav-next">></div> 

с styling on jsfiddle

Answer 1

Вы применение свойств переполнения эллипсов в .nav контейнер вместо названий.

JSFiddle

CSS

.nav .nav-main-title, .nav .nav-sub-title { 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    width: inherit; 
}