具有自動寬度和溢出隱藏的中跨度元素

更新：使用flexbox是一個選項，但支持舊版瀏覽器的解決方案將是首選。具有自動寬度和溢出隱藏的中跨度元素

這應該是一件容易的事情，但現在我正在尋找解決方案的小時而沒有成功。我想創建一個導航，其中中間跨度「非常長的標題1 2 2 3 4 ...」不會執行換行並在視圖端口大小變得非常小時垂直增長。不適合span標題標題的內容應該隱藏起來。

爲了更好地理解，我附加了兩個圖形和一個jsfiddle示例。

電流：

目標：

的jsfiddle： https://jsfiddle.net/herbert_hinterberger/ofu8c8rn/3/

<div class="container-fluid"> 

<div class="row row-offcanvas row-offcanvas-left"> 

    <div class="col-xs-12 col-sm-9"> 
     <div class="row" id="header"> <!--header--> 
      <div class="col-xs-12"> 
       <span id="header-menu-trigger" class="pull-left hidden-md hidden-lg" data-toggle="offcanvas"> 
        <i class="fa fa-bars fa-3x"></i> 
       </span> 
       <span> 
        <h3 id="header-title">Very long headline 1 2 3 4 5 6 7 8 9 10 </h3> 
       </span> 
       <span class="notification-container pull-right"> 
        <h3 class="notification">8</h3> 
       </span> 
      </div> 
     </div> <!--/header--> 
    </div> <!--/offcanvase--> 
</div> <!--/row-->

來源

2015-10-19 HH.

嘗試彎曲。 Flex將確保中間元素伸展/縮小到可用空間。另外，刪除notification-container div上的右鍵。

https://jsfiddle.net/5s3v55px/

添加這個CSS

.my-flex{ 
    display:flex; 
} 
.flex-1{ 
    flex:1; 
}

HTML變化

<div class="col-xs-12 my-flex"> 
        <span id="header-menu-trigger" class="pull-left hidden-md hidden-lg" data-toggle="offcanvas"> 
         <i class="fa fa-bars fa-3x"></i> 
        </span> 
        <span class="flex-1"> 
         <h3 id="header-title">Very long headline 1 2 3 4 5 6 7 8 9 10 </h3> 
        </span> 
        <span class="notification-container"> 
         <h3 class="notification">8</h3> 
        </span> 
       </div>

來源

2015-10-19 05:03:06

感謝顯示此選項。唯一的「缺點」似乎是IE上的「窮人」支持。因此，我正在尋找一種可以在傳統瀏覽器上運行的解決方案。但是當然。如果它不可用，我會按照你的建議。謝謝 –

剛剛意識到使用IE 9及更低版本的用戶數量真的很少。因此，你的建議似乎是最好的選擇。非常感謝！ –

太棒了，很高興我能幫到你。儘可能在瀏覽器專用前綴中使用flex屬性。這裏有一些信息https://css-tricks.com/using-flexbox/。 –

具有自動寬度和溢出隱藏的中跨度元素

回答

相關問題