CSS - 溢出高度和宽度,以及自动换行

时间:2013-02-19 19:33:16

标签: css overflow word-wrap

我在制作具有已定义高度和宽度的项目列表时遇到问题,以便在IE中正确显示。在IE中溢出不适用于高度和宽度,并且在chrome中只有盒子的高度搞砸了,右边的溢出会按预期隐藏。

我运行一个jquery脚本来截断溢出的文本,以便它适合高度。此脚本不起作用,因为滚动高度始终与高度相同。但是,在Chrome中,如果其中一行溢出到右侧(宽度),则文本无法正确包装,因此我尝试将word-wrap添加到css而不起作用。

我一直在讨论这个问题fiddle,并且该问题的所有细节都应该在那里提供。

我已经使用IE9和Chrome 24进行了测试。

1 个答案:

答案 0 :(得分:0)

此问题的解决方案是删除子项上的display: tabledisplay: table-cell。这样,word-wrap和溢出都可以在IE和Chrome上运行。此外,已编辑javascript以将高度与其父级高度进行比较。这要求父级具有指定的高度和oveflow才能隐藏起作用。

我已编辑了fiddle

编辑: 但是,一个小注意事项:这可以防止文本垂直居中。我正在努力解决这个问题......

编辑: 好的,所以将文本垂直居中在列表项中的解决方案并不是一个好的解决方案,而不是我为之骄傲的解决方案。我改变了我的javascript以直接在元素上添加css规则。看小提琴