css - 用省略号在 div 中换行（+ 浮动 div 的自动换行）

Question

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

1) 标题 (nav) 应该在一行上，没有换行（这包括 nav-back、nav-title 和 nav-next）

2）当你缩小窗口时，导航标题应该缩小并且当窗口不允许显示所有文本时，它应该用省略号切断（例如'这太长了......'）

这是我的工作：

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

在 jsfiddle 上使用样式

Answer 1

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

JSFiddle

CSS

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