javascript - Button with multi-line label bringing troubles with column layout

Question

I'm creating a dynamic panel with buttons. De buttons have an image 'big' image and a label. For longer labels I want multi-line labels. Using css you can force multi-line bij setting white-space: normal. But then the button on the next line snaps to the end of the line.

I've set up 2 jsfiddle's

One with the .launchpad-button .x-btn-inner white-space commented out.

jsfiddle 1

looks fine only I want the full text (so multi-line)

jsfiddle 2

looks not so fine.. how should I fix this?

Edit:

Ow snap! It works using ScottS' solution but when my window resizes or there isn't enough space I get this issue: The new line (clear: left) is in the wrong place

Answer 1

如果每个只有三列宽，那么在你的 CSS 中的cls: 'new-row'每 4 个项目中添加一个 ...xtype: 'container'

.new-row {
    clear: left;
}

...解决问题。一个纯 css3（所以只能在现代浏览器中工作）不需要new-row添加到脚本中的额外类，而只需要这个 css 来选择每 4 个元素：

.x-container:nth-of-type(4n) {
    clear: left;
}