Bootstrap標題文本橢圓

我正在尋找橢圓的標題文本組件之一，當視口大小很小，以防止標題包裝併成爲兩條線。Bootstrap標題文本橢圓

詳細信息：https://jsfiddle.net/3L8ch5bo/7/當您更改視口的寬度時 - 您會看到標題分爲兩行。

我喜歡它以這種方式橢圓：https://jsfiddle.net/vsj896as/1/

上面ellipsing所示的問題是，它迫使頭是固定的長度。有沒有一種方法可以根據視口的大小使其變爲橢圓形（例如，使用max-width：calc（..））。

請注意，標題上的「左邊的文本」是非標準的引導程序標題組件並導致了複雜性。它是必要的，不能縮短，應該全部顯示。

任何幫助是極大的讚賞..

下面是HTML代碼：

<body> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
     <div class="pull-left headComp">Left Text</div> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-items-collapse" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <div class="navbar-brand ellipsed">How to Ellipse This Very Very Long Header Text</div> 
     </div> 
     <div class="collapse navbar-collapse" id="menu-items-collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a target="_blank" href="url1">Home</a></li> 
      <li class="active"><a target="_blank" href="url2">Getting Started</a></li> 
      <li class="active"><a target="_blank" href="url3">Contact</a></li> 
      <li class="active"><a target="_blank" href="url4">Videos</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav> 

    <div class="jumbotron container-fluid" style="text-align: center;"> 
    <h1>Jumbo Message</h1> 
    </div> 

</body>

來源

2017-01-15 user1055761

這裏是一個快速的方式來完成你想要什麼。附帶的代碼和提供的jsfiddle檢查document.ready上的視口大小。如果尺寸小於768px，則.navbar品牌內的文字會縮短。

.resize事件觸發響應部分。如果視口大於768px，那麼原始文本將顯示，否則視口小於縮寫文本將顯示。

希望能夠幫助或至少讓您朝正確的方向發展。

視圖的jsfiddle here

$(function(){ 
 

 
var $startingView = $(window).width(); 
 
var $startingBrand = $('.navbar-brand'); 
 

 
if($startingView < 768) { 
 
\t $startingBrand.text("How To...") 
 
} 
 
    
 
$(window).resize(function(){ 
 
    
 
var $viewportWidth = $(window).width(); 
 
var $brand = $(".navbar-brand"); 
 
var originalTitle = "How to Ellipse This Very Very Long Header Text"; 
 
var shortTitle = "How To..."; 
 
    
 
    \t if($viewportWidth < 768) { 
 
    \t \t $brand.text(shortTitle); 
 
    }else{ 
 
    \t $brand.text(originalTitle); 
 
    } 
 
    
 
}); 
 
});

.headComp { 
 
    color: white; 
 
    margin-top: 16px; 
 
    width: 95px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<body> 
 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
     <div class="pull-left headComp">Left Text</div> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-items-collapse" aria-expanded="false"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <div class="navbar-brand">How to Ellipse This Very Very Long Header Text</div> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="menu-items-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a target="_blank" href="url1">Home</a></li> 
 
      <li class="active"><a target="_blank" href="url2">Getting Started</a></li> 
 
      <li class="active"><a target="_blank" href="url3">Contact</a></li> 
 
      <li class="active"><a target="_blank" href="url4">Videos</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 

 
    <div class="jumbotron container-fluid" style="text-align: center;"> 
 
    <h1>Jumbo Message</h1> 
 
    </div> 
 

 
</body>

來源

2017-01-17 05:08:35 jameswassinger

感謝您抽出寶貴的時間和抱歉，我並不清楚。我正在尋找儘可能顯示的標題文本（而不僅僅是如何...）。所以根據設備的視口大小（不只是小於768）。如果可能的話，我也在尋找唯一的解決方案。但是，如果這必須使用js來完成，那麼就這樣吧。 – user1055761

Bootstrap標題文本橢圓

回答

相關問題