Meilleure façon de créer de Bootstrap 3 Navbar sans l'habillage du texte (et pas de fermeture)

Je suis en train de créer une barre de navigation avec Bootstrap 3 que n'a pas d'effondrement ou le texte à la ligne. J'aimerais que le texte de tout simplement être supprimé (ou ellipses) au lieu de l'emballage de sorte que la barre de navigation reste sur une seule ligne sans l'expansion verticale. (cette barre de navigation sera utilisé pour afficher la vue de l'emplacement avec un seul aligné à droite du menu)

Quelque chose comme ceci:

<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>

Comme indiqué, j'ai été idiot avec CSS float, les débordements, les espaces de paramètres et ne pouvez pas sembler obtenir la bonne combinaison. Aussi, je suis l'aide de deux navbar-éléments d'en-tête pour éviter de s'effondrer, mais je suis ouvert à d'autres options si il ya une meilleure façon.

Merci pour l'aide.

J'ai fait quelque chose comme cela, il y a deux jours. Voir ma réponse.
N'est-ce pas, comme une grande Bootstrap de surveillance?
Connexes: Garder la barre de navigation des articles en dehors de l'effondrement, Exclure l'élément de menu à partir de l'effondrement

OriginalL'auteur Ender2050 | 2013-12-04

  1. 4

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

    Voici une version fixe qui fonctionne très bien: 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>

    Va avoir à jouer avec le pourcentage sur la plus petite des largeurs afin de permettre la zone de menu. Faire un min-width sur celui-ci et vous allez comprendre. Peut-être ajouter un peu de rembourrage pour l'obtenir c'est de ne pas se couvrir. Je vais voir plus tard aujourd'hui ou demain à ce sujet.

    Merci, cela fonctionne très bien. Je l'ai créé dans jsFiddle avant que j'ai vu votre jsBin lien jsfiddle.net/Ender2050/h27SD/1.
    C'est que la position fixe qui va vous car il n'y a pas de largeur sur elle car elle contourne la normale css choses.
    utiliser le second lien, il a du rembourrage pour les petits et un pourcentage pour les plus grands.

    OriginalL'auteur Christina

  2. 2

    Si vous vous permettez de javascript /jquery; ajouter le débordement de l'en-tête de votre .pull-gauche div trop; <div class="navbar-header pull-left" style="overflow: hidden;">

    et utiliser ceci:

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

    Voir: http://bootply.com/98610
    Notez que vous aurez à faire la conversion sur la taille de l'écran changements à l'aide de cette solution.

    Si vous pouviez donner votre droite nav une largeur fixe et permettre ccs3 nécessaire, vous pouvez faire de même avec:

    .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;}

    Voir aussi: https://stackoverflow.com/a/14101451/1596547

    OriginalL'auteur Bass Jobsen

  3. 1

    Supprimer .navbar-text CSS, et l'utilisation white-space: normal :

    Meilleure façon de créer de Bootstrap 3 Navbar sans l'habillage du texte (et pas de fermeture)

    <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

    Merci, mais je vais essayer d'obtenir le texte à ne PAS envelopper comme vous l'avez indiqué - de sorte qu'il s'affiche sur une seule ligne, Navbar.

    OriginalL'auteur zessx

  4. 0

    Prendre un coup d'oeil à la propriété CSS3 text-warp -> http://www.w3schools.com/cssref/css3_pr_text-wrap.asp

    Merci, mais j'ai besoin d'une solution qui fonctionne dans les navigateurs modernes - et comme cette page mentionne, "Le texte d'enveloppe de propriété n'est pas prise en charge dans tous les principaux navigateurs."

    OriginalL'auteur Lukas Eichler