javascript - 如何使每个部分适合 li 框？

Question

http://codepen.io/anon/pen/ZGxKoO

我有这个，我想知道如何使每个 li 中的内容自动化，而不是转到下一个 li 列。我是否缺少任何可以防止这种行为的 CSS？

目前，Home 内容转移到 Contact(A 做的)。我想我可以使用 javascript 在每个部分中的一组字符后插入一个中断，或者在它溢出之前在 html 中手动使用 br 标记。

这是 CSS:

  li {
  list-style: none;
  display: inline-block;
  width: 30%;
  text-align: center;
  background-color: pink;
  color: green;

}
section {
  float: left;
  width: 30%;
  margin: 0 1.5% 24px 1.5%;

}

Answer 1

试试这个，

li {
  list-style: none;
  display: inline-block;
  width: 30%;
  text-align: center;
  background-color: pink;
  color: green;

}
    section {
      float: left;
      width: 30%;
      margin: 0 1.5% 24px 1.5%;
      word-wrap: break-word;

    }

为部分添加了 word-wrap: break-word;。

似乎工作正常!