将标签内的文字换行不起作用

Question

我正在使用带图像的选项按钮，并在每个图像下面放置文字。但如果您在Fiddle的第一行中看到第二张图像，您可以看到由于长名称，图像之间的间隙比第二行更多。如何自动换行以使其垂直扩展。我试过word-break: break-word但没有工作。

有人能说出如何修复它吗？

Answer 1

为标签

指定max-width属性

这个词没有包装的原因是因为它不知道标签在包装之前有多宽

我添加了max-width：60px;作为一个例子

Answer 2

添加一个已定义的宽度，这样div就会将文本向下推，如果它超过了。

label{
  float:left;
  text-align:center;
  word-break: break-word;
  height:100px;
  width:50px;
  padding:15px;
}

你的CSS代码应该看起来像这样，我添加的只是定义的宽度（你真的已经拥有，只是错误地评论）和填充以给图像一些空间。

Code Example

Answer 3

文本嵌套在无宽度标签中。因此，文本有无限的空间可以传播。通过向标签标签添加宽度来划分文本。

label{
  width:70px;
}