「ellipsisable」導航欄居中標題

我試圖建立一個頂部導航欄，其中有一個居中標題，當標題很長或者屏幕寬度很窄時應該自動「省略」。爲此，我想使用text-overflow: ellipsis屬性，但似乎text-overflow: ellipsis要求元素具有寬度，這是一個問題，因爲我必須將我的標題元素設置爲inline元素。「ellipsisable」導航欄居中標題

目前我的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

「ellipsisable」導航欄居中標題

回答

相關問題