如何以<a href>固定寬度</a>顯示<a href>長文本</a>

Question

我有固定寬度的水平外來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：在ul.horizo​​ntal-funtions-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> 

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

問題（和解決方案）

• 如果您想包裝列表，請不要包含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; } 

 <ul class="horizontal-funtions-list"> <li><a href="#Function A">I am long function name</a></li> <li><a href="#home">Home</a></li> <li><a href="#Function B">Another long function name</a></li> <li><a href="#Function C">Yet another</a></li> <li><a href="#Function D">We can keep going</a></li> </ul> <p>Space in between.</p> <ul class="horizontal-funtions-list"> <li><a href="#Function A">Shorter list</a></li> <li><a href="#home">Doesn't wrap</a></li> </ul> 

Answer 4

• 刪除空格：nowrap;
• 刪除ul.horizo​​ntal-funtions-list li寬度：100px；
• 更改ul.horizo​​ntal-funtions-list li max-width：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;

    }