0

同じ行に必要な固定サイズのコンテナー内にヘッダーと説明テキストがあります。

どちらも動的な幅があります。

説明 (通常はもっと長い) がコンテナーからはみ出したときに、省略記号を付けて表示したいと考えています。

これは私がこれまでに持っているものです: fiddle .

マークアップ

<div>
    <span class="header">Some dynamic-width header</span>
    <span class="desc">Some dynamic-width description which - when long enough - should end with a ellipsis</span>
</div>

CSS

div
{
    width: 400px;
    max-width: 400px;
    height: 25px;
    line-height: 25px;
    border-bottom: 2px solid #952262;
    color: #111;
}
.header
{
    font-weight: bold;
    float:left;
}
.desc
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block; 
    width: 100%;
}

何か案は？

4

1 に答える 1

0

ちょうどそれを理解しました。

display:block.desc クラスで必要だった

フィドル

CSS

div
{
    width: 400px;
    max-width: 400px;
    height: 25px;
    line-height: 25px;
    border-bottom: 2px solid #952262;
    color: #111;
}
.header
{
    font-weight: bold;
    float:left;
}
.desc
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block; 
}
于 2013-08-08T12:09:47.677 に答える