«эллипсируемое» навигация по центру с заголовком

Я пытаюсь создать верхнюю навигационную панель, где есть центральное название, которое должно быть автоматически «эллипсовым», когда заголовок очень длинный или ширина экрана узкая. Для этого я хочу использовать свойство text-overflow: ellipsis, но кажется, что text-overflow: ellipsis требует, чтобы элемент имел ширину, что является проблемой, потому что мне пришлось сделать мой элемент title элементом inline.«эллипсируемое» навигация по центру с заголовком

В настоящее время мой HTML является

<body> 
<div class="navbar"> 
    <div class="navbar-container"> 
     <ul class="pull-left"> 
      <li>item1</li> 
      <li>item2</li> 
     </ul>      

     <h1 class="title"> 
      <a href="#">My Title</a> 
     </h1>  

     <ul class="pull-right"> 
     <li>item3</li> 
     <li>item4</li> 
    </ul> 
    </div> 
</div> 
</body>

И мой CSS:

body { 
    width: 100% 
} 
.navbar { 
    position: fixed; 
    text-align: center; border-bottom: 1px solid #cccccc; 
    width: inherit; 
}    
.navbar-container { 
    height: 20px; 
    padding: 20px 18px; 
} 
ul { 
    display:block; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}       
li { 
    display: block; 
    float: left; 
    margin-right: 18px; 
    position: relative; 
}    
h1.title { 
    width: 200px; 
    display: inline; 
    font-size: 17px; 
}  
.pull-left { 
    float: left; 
} 
.pull-right { 
    float: right; 
}

http://jsfiddle.net/4CvRH/

Есть ли подход (изменение HTML или CSS), которые могут добиться того, что мне нужно?

источник

2014-02-13 Florent2

Демо: http://jsfiddle.net/4CvRH/2/

Вы можете использовать inline-block вместо inline, если вы не хотите, чтобы ваш h1 быть элементом уровня блока.

h1.title { 
    width: 200px; 
    display: inline-block; 
    font-size: 17px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

источник

2014-02-13 20:10:11 Arbel

«эллипсируемое» навигация по центру с заголовком

ответ

Смежные вопросы