如何以固定宽度显示 <a href> 长文本

Toxic 发表于 Dev

有毒的

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

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.horizontal-funtions-list li a 但它不工作

玛瑙

尝试

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。