html - 如何显示固定宽度的长文本

Question

我有固定宽度的横向外来 html 列表，每个列表都有一些时间文本更长，我需要将文本溢出到下一行但没有滚动条。

html

  ul.horizontal-funtions-list{
      list-style-type: none;
      width: 100%;
      padding-left: 0;
      padding-top: 10px;
      padding-bottom: 10px;
      margin: 0;
      overflow-x:auto;
      white-space: nowrap;
      background-color: blueviolet;
     }

    ul.horizontal-funtions-list li{
     display: inline-block;
     zoom:1;
     width: 100px;
     margin-left: 20px;
     padding: 20px;
     background-color: greenyellow;
    }

    ul.horizontal-funtions-list li a{
      display: block;
      width: 80px;
      color:gray;
    }

  <ul class="horizontal-funtions-list">
        <li><a href="#Function A">I am long function name</a></li>
        <li><a href="#home">Home</a></li>          
    </ul> 

我试过 display: block in ul.horizo​​ntal-functions-list li a 但是没有成功

Answer 1

尝试

ul.horizontal-funtions-list li a {
  display: block;
  color:gray;
  white-space: pre-wrap; /* css-3 */    
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */    
  white-space: -o-pre-wrap; /* Opera 7 */    
  word-wrap: break-word; /* Internet Explorer 5.5+ */

  /* OPTIONAL - FIXED height
    overflow: hidden;
    height: 50px;
  */
}

请注意 width 已被删除。
这是演示输出的片段。

ul.horizontal-funtions-list{
  list-style-type: none;
  width: 100%;
  padding-left: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0;
  overflow-x:auto;
  white-space: nowrap;
  background-color: blueviolet;
 }

ul.horizontal-funtions-list li{
 display: inline-block;
 zoom:1;
 width: 100px;
 margin-left: 20px;
 padding: 20px;
 background-color: greenyellow;
}

ul.horizontal-funtions-list li a{
  display: block;
  color:gray;
  white-space: pre-wrap; /* css-3 */    
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */    
  white-space: -o-pre-wrap; /* Opera 7 */    
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  overflow: hidden;
  height: 50px;
}

<ul class="horizontal-funtions-list">
    <li><a href="#Function A">I am long function name</a></li>
    <li><a href="#home">Home</a></li>          
</ul>