空白がないときにテキストのオーバーフローを省略記号に変更するには

Question

テキストとボタンを含むコンテナがあります。 コンテナの上部にあるテキストは動的です。時には短くても長くなるでしょう。

大きな画面では、下の画像の最初の行に見られるようにテキストが2番目の行に壊れても、必要なすべての要素を含む十分な領域があります。 （それ以上ではない）。

小さな画面では、すべてのものを含む高さがないため、2行目に壊れることさえありません。二行目に侵入するのに十分なスペースがあります場合、私は何をしたいのか

が、ある、テキストは、第2ラインに侵入する必要があります。

しかし、スペースが足りない場合は、代わりに省略記号を追加する必要があります。

純粋なCSSでこれを行う方法はありますか？

Answer 1

あなたはnowrapにwhite-spaceを設定することにより、破壊行を無効にし、ellipsisにtext-overflowセットを追加する必要があります。

.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

---

サンプル：

.container { 
 
    width: 100px; 
 
} 
 

 
.ellipsis { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="container ellipsis"> 
 
Very long long long text 
 
</div>

Answer 2

.button { 
 
    border:none; 
 
    padding: 5px 10px; 
 
    background-color: #000; 
 
    color: #FFF; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    width: 100px; 
 
}

<button class="button">This text is way to long for this button</button>

Answer 3

JavaScriptが受け入れられる場合は、dotdotdotプラグインがあります。