テキストオーバーフロー：省略記号が機能していません - なぜですか？

Question

このオーバーフロー省略記号は機能していないようで、ドキュメントの例のように見えますが、何が間違っていますか？

Fiddle

p { 
 
    width: 100px; 
 
    height: 100px; 
 
    word-break: break-all; 
 
    border: 1px solid blue; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<p> 
 
    sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss 
 
</p>

Answer 1

あなたはwhite-space: nowrap;もword-break: break-allが欠落している。この場合には必要ありません。

p{ 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid blue; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<p> 
 
Some long text it is going to be ellipsed 
 
</p>

---

あなたは、スペースのない長い単語を持ってしようとしているならば、あなたも必要ありませんwhite-space: nowrap;

p{ 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid blue; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<p> 
 
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss 
 
</p>

Answer 2

テキストオーバーフローを使用しています：省略記号。幅が溢れている場合は点線で、幅は空白です。 NOWRAPを使用せずに

p{ 
 
    width: 100px; 
 
    height: 50px; 
 
    border: 1px solid red; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space:nowrap; 
 
}

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>