CSS break-word not breaking words

Question

在下面的演示中，我試圖用小容器（窄瀏覽器寬度）來包裝文本，並用連字符打破單詞。

有一個5px的填充，但正確的填充似乎與一些文本一起在屏幕外。

DEMO：

https://jsbin.com/lajesilefi/edit?html,css,output

Answer 1

你必須有兩倍的屬性格式字斷。刪除第二行

word-break:break-all; 
word-break:break-word; <-- remove that line 

另外，作爲Germano的Plebani建議，刪除這些行：

min-width: 100%; 
width: 100%; 
max-width: 100%; 

那麼它應該工作的罰款。

除此之外，我建議你#notification .ra-content塊使用保證金，而不是填充的，因此文本的最後一位沒有消失

https://jsbin.com/nudixewibu/1/edit?html,css,output