0

アイテムのステータスを表示する div 要素があります。ステータステキストが大きすぎる場合は、省略記号を折り返して表示したい。以下はアイテムのCSSです。

.item-status {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-spacing: -0.17em;
    letter-spacing: -0.02em;
    font-size: 8pt;
    float: right;
    width: auto;
    padding-top: 1px;
    text-indent: .25em;
    min-width: 3.25em;
    max-width: 7em;
    padding-right: 2px;
}

そして対応するdivは

<div class="item-status">This is an open item to test ellipsis</div>

このテキストでは、「o」の後に省略記号が表示されます

これは o... (12 文字以降)

同じクラスの別の div があります

<div class="item-status">Some one is looking into this. Please wait.</div>

このテキストでは、省略記号は次のように表示されます

Some one i... (10 文字以降)

10 文字の後など、指定された文字数の後に一貫して省略記号を表示する必要があります。折り返されたテキストで省略記号が表示される場所を制御するために設定できるプロパティはありますか?

4

2 に答える 2

1

これは CSS ではできませんが、Javascript ではできます。

// gets characters 1 - 10 in newstr
var str = "abcdefghijklmnopqrstuv";
var newstr = str.substr(0, 10);
newstr += '...';
于 2013-03-26T07:12:22.543 に答える
0

CSSをいじるのに時間を費やした後、これを達成する直接的な方法がないことがわかりました（フォントファミリー、サイズなどを調整する以外に）。そのため、今のところ、div を「左」にフロートさせ、最小幅を増やす回避策を提案しました。このようにして、div はメッセージを表示する幅全体を持ちます。オーバーフローは必要ありません:)

于 2013-03-27T11:44:47.307 に答える