text-overflow：省略號不工作 - 爲什麼？

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;不使用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>