Il modo migliore per creare Bootbar 3 Navbar senza avvolgere il testo (e non comprimere)

Question

Sto provando a creare un Navbar con Bootstrap 3 che non comprima o avvolga il testo. Mi piacerebbe che il testo fosse semplicemente troncato (o ellissi) invece che a capo - quindi il Navbar rimane su una singola riga senza espansione verticale. (Questo Navbar verrà utilizzata per visualizzare la posizione vista corrente con un unico menu allineato a destra)

Qualcosa di simile a questo:

<div class="navbar navbar-fixed-top navbar-inverse"> 

    <div class="navbar-header pull-left"> 
     <p class="navbar-text" style="overflow: hidden; white-space: nowrap;"> 
      Trying to get this long line of text to not wrap even if too wide for the view to display. Trying to get this long line of text to not wrap even if too wide for the view to display. 
     </p> 
    </div> 

    <div class="navbar-header pull-right"> 
     <p class="navbar-text">Menu</p> 
    </div> 

</div> 

Come mostrato, ho ingannare con galleggiante CSS, troppo pieno, gli spazi bianchi impostazioni e non riesco a ottenere la giusta combinazione. Inoltre, sto usando due elementi di intestazione navbar per evitare il collasso, ma sono aperto ad altre opzioni se c'è un modo migliore.

Grazie per l'aiuto.

Answer 1

http://jsbin.com/elezawA/1/

Ecco una versione fissa che Funziona alla grande: http://jsbin.com/elezawA/2

body { 
padding-top: 50px; 
} 

.overflow { 
    position:absolute; 
    top:0; 
    left:0; 
    display: block; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
    margin-top: 0; 
    color:#ccc; 
    max-width:90%; 
} 

    .overflow p {color:#ccc;line-height:50px;padding:0 10px;margin:0;display:inline;} 


<div class="navbar navbar-fixed-top navbar-inverse"> 

    <div class="navbar-header"> 
     <span class="overflow"> 
     <p> 
     Trying to get this long line of text to not wrap even if too wide for the view to display. Trying to get this long line of text to not wrap even if too wide for the view to display. 
     </p> 
    </span> 
    </div> 

    <div class="navbar-header pull-right"> 
     <p class="navbar-text">Menu</p> 
    </div> 

</div> 

Andando a dover armeggiare con la percentuale sulle larghezze più piccole per consentire l'area del menu. Fai una larghezza minima su questo e lo capirai. Magari aggiungi un po 'di padding per non coprirlo. Vedrò più tardi oggi o domani su questo.

Answer 2

Date un'occhiata alla proprietà CSS3 text-warp ->http://www.w3schools.com/cssref/css3_pr_text-wrap.asp

Answer 3

Rimuovere .navbar-text CSS inline, e utilizzare white-space: normal:

<div class="navbar navbar-fixed-top navbar-inverse"> 

    <div class="navbar-header pull-left"> 
     <p class="navbar-text"> 
      Trying to get this long line of text to not wrap even if too wide for the view to display. Trying to get this long line of text to not wrap even if too wide for the view to display. 
     </p> 
    </div> 

    <div class="navbar-header pull-right"> 
     <p class="navbar-text">Menu</p> 
    </div> 

</div> 

.navbar-text { 
    margin-right: 15px; 
    margin-left: 15px; 
    white-space: normal 
} 

Bootply

Answer 4

Se si consente javascript/jquery; aggiungi anche l'intestazione di overflow al tuo .pull-left div; <div class="navbar-header pull-left" style="overflow: hidden;">

e utilizzare questo:

$(function() { 
    $('.pull-left').css('max-width', ($(window).width() - $('.pull-right').width()) + 'px'); 
}); 

See: http://bootply.com/98610 nota che si dovrà fare il ricalcolo sui cambiamenti dimensioni dello schermo utilizzando questa soluzione.

Se si potesse dare la vostra destra nav una larghezza fissa e consentire CCS3 necessario si può fare lo stesso con:

.pull-left 
{ 
/* Firefox */ 
max-width: -moz-calc(100% - 60px); 
/* WebKit */ 
max-width: -webkit-calc(100% - 60px); 
/* Opera */ 
max-width: -o-calc(100% - 60px); 
/* Standard */ 
max-width: calc(100% - 60px); 
} 
.pull-right{width:60px;} 

vedi anche: https://stackoverflow.com/a/14101451/1596547