CSS破解词不破词

时间:2015-10-07 08:56:05

标签: css css3 layout

在下面的演示中,我试图将文本换成小容器(缩小浏览器宽度)并用连字符打破单词。

有一个5px的填充,但右边的填充似乎在屏幕外,还有一些文本。

样本:

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

1 个答案:

答案 0 :(得分: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