用椭圆包裹div中的文本（+浮动div的包裹）

Question

好好用这个把我的头撞在桌子上一段时间......想要实现以下目标

1）标题（nav）应该在一行上没有包装（这包括nav-back，nav-title＆amp; nav-next）

2）当你缩小窗口时，nav-title应该收缩并且当窗口不允许显示所有文本时它应该用省略号剪掉（例如＆＃39;这太过于lon ..＆＃39）

以下是我的工作内容：

<div class="nav">
<div class="nav-back"><</div>
<div class="nav-title">
    <div class="nav-main-title">Want this no-wrap with ellipses</div>
    <div id="default-page-sub-title" class="nav-sub-title">Same here</div>
</div>
<div class="nav-next">></div>

styling on jsfiddle

Answer 1

您正在将省略号溢出属性应用于.nav容器，而不是标题。

JSFiddle

<强> CSS

.nav .nav-main-title, .nav .nav-sub-title {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width: inherit;
}