1

しばらくの間、これで机に頭をぶつけていました..次のことを達成したい

1）ヘッダー（nav）は、折り返しなしで1行に配置する必要があります（これには、nav-back、nav-title、nav-nextが含まれます）

2）ウィンドウを縮小する場合nav-titleは縮小する必要があり、ウィンドウですべてのテキストを表示できない場合は、省略記号で切り取る必要があります（例：「これは長すぎます。」）

これが私が働いているものです：

<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のスタイリング付き

4

1 に答える 1

2

.navタイトルではなく、楕円オーバーフロープロパティをコンテナに適用しています。

JSFiddle

CSS

.nav .nav-main-title, .nav .nav-sub-title {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width: inherit;
}
于 2013-03-26T23:05:28.880 に答える