如何显示<a href=""> long text with fix width

Question

I have horizontally alien html -list with fix width and each list have some time text within is longer and I need to overflow text to next line but without scrollbar.

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> 

I have tried display: block in ul.horizontal-funtions-list li a but its not working out

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> 

Answer 2

     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;
      /*new style*/
      white-space: pre-wrap;
    } 

    <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>  

仅为<a>标签添加此CSS代码。white-space: pre-wrap;

尝试此代码。

Answer 3

问题（和解决方案）

• 如果您想包装列表，请不要包含 if (model.Dynamic_ProductsSize.Count > 0) { foreach (var item in model.Dynamic_ProductsSize) { _sizes.Add(new ProductsSize(){SizeId = item}); } } 。
• 如果您不想使用滚动条，请不要包含white-space: nowrap。
• 如果您希望列表项包含它们具有的文本，请不要在其上设置固定的overflow-x: auto（也不要在其中具有width: 100px的锚点上）。

演示

我主要删除您拥有的样式的地方，并分别设置适当的width: 80px和padding以使间距正确。

margin

ul.horizontal-funtions-list {
  margin: 0;
  padding: 0 20px 20px 0;
  background-color: blueviolet;
  list-style-type: none;
}

ul.horizontal-funtions-list li {
  display: inline-block;
  margin: 20px 0 0 20px;
  padding: 20px;
  background-color: greenyellow;
}

ul.horizontal-funtions-list li a {
  color: gray;
}

Answer 4

• 删除空格：nowrap;
• 删除ul.horizo​​ntal-funtions-list li宽度：100px;
• 更改ul.horizo​​ntal-funtions-list li的最大宽度：100px;

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: 15px;
    background-color: greenyellow;
}

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

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

Answer 5

从链接中删除width属性，然后添加white-space: pre-wrap; 就是这样。

    ul.horizontal-funtions-list li a{
      /* width: 80px; */
      display: block;
      white-space: pre-wrap;
      color:gray;

    }