Html 创建 Bootstrap 3 Navbar 而不换行文本的最佳方法（并且没有折叠）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20385514/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best way to create Bootstrap 3 Navbar without wrapping text (and no collapse)
提问by Ender2050
I'm trying to create a Navbar with Bootstrap 3 that doesn't collapse or wrap the text. I'd like the text to simply be cut off (or ellipses) instead of wrapping - so the Navbar remains on a single line without expanding vertically. (this Navbar will be used to display the current view location with a single right-aligned menu)
我正在尝试使用 Bootstrap 3 创建一个不会折叠或包装文本的导航栏。我希望文本被简单地切断（或省略号）而不是换行 - 因此导航栏保持在一行上而不垂直扩展。（此导航栏将用于通过单个右对齐菜单显示当前视图位置）
Something like this:
像这样的东西：
<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>
As shown, I've been fooling with CSS float, overflow, whitespace settings and can't seem to get the right combination. Also, I'm using two navbar-header elements to avoid collapsing, but I'm open to other options if there is a better way.
如图所示，我一直在愚弄 CSS 浮动、溢出、空白设置，似乎无法获得正确的组合。此外，我使用两个导航栏标题元素来避免折叠，但如果有更好的方法，我愿意接受其他选项。
Thanks for the help.
谢谢您的帮助。
采纳答案by Christina
Here's a fixed version that works great: http://jsbin.com/elezawA/2
这是一个很好用的固定版本：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>
Going to have to fiddle with the percentage on the smaller widths to allow for the menu area. Do a min-width on this one and you'll figure it out. Perhaps add some padding to get it to not cover up. I will see later on today or tomorrow about this.
将不得不摆弄较小宽度的百分比以允许菜单区域。在这个上做一个最小宽度，你会弄清楚的。也许添加一些填充物以使其不被掩盖。我将在今天或明天晚些时候看到这个。
回答by Bass Jobsen
If you allow javascript / jquery; add the overflow header to your .pull-left div too; <div class="navbar-header pull-left" style="overflow: hidden;">
如果你允许 javascript/jquery; 也将溢出标题添加到您的 .pull-left div 中；<div class="navbar-header pull-left" style="overflow: hidden;">
and use this:
并使用这个：
$(function() {
$('.pull-left').css('max-width', ($( window ).width() - $('.pull-right').width()) + 'px');
});
See: http://bootply.com/98610Note you will have to do recalculation on screen size changes using this solution.
请参阅：http: //bootply.com/98610请注意，您必须使用此解决方案对屏幕尺寸更改进行重新计算。
If you could give your right nav a fixed width and allow ccs3 required you can do the same with:
如果你可以给你的右导航一个固定的宽度并允许需要 ccs3 你可以做同样的事情：
.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;}
回答by zessx
Remove .navbar-textinline CSS, and use white-space: normal:
删除.navbar-text内联 CSS，并使用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
}
回答by Lukas Eichler
Take a look at the CSS3 property text-warp-> http://www.w3schools.com/cssref/css3_pr_text-wrap.asp
看看 CSS3 属性text-warp-> http://www.w3schools.com/cssref/css3_pr_text-wrap.asp
