Html 如何显示<；a href>；固定宽度的长文本

我有一个固定宽度的html列表，每个列表都有一段时间内的文本比较长，我需要将文本溢出到下一行，但没有滚动条

html

ul.horizontal-Functions-list{
列表样式类型：无；
宽度：100%；
左侧填充：0；
填充顶部：10px；
垫底：10px；
保证金：0；
溢出-x：自动；
空白：nowrap；
背景色：蓝紫色；
}
ul.水平功能列表li{
显示：内联块；
缩放：1；
宽度：100px；
左边距：20px；
填充：20px；
背景颜色：绿黄色；
}
ul.水平功能列表li a{
显示：块；
宽度：80px；
颜色：灰色；
}

试试看

注意，

宽度

已被删除。
下面是一个演示输出的片段

ul.horizontal-Functions-list{
列表样式类型：无；
宽度：100%；
左侧填充：0；
填充顶部：10px；
垫底：10px；
保证金：0；
溢出-x：自动；
空白：nowrap；
背景色：蓝紫色；
}
ul.水平功能列表li{
显示：内联块；
缩放：1；
宽度：100px；
左边距：20px；
填充：20px；
背景颜色：绿黄色；
}
ul.水平功能列表li a{
显示：块；
颜色：灰色；
空白：预换行；/*css-3*/
空白：-moz预包装；/*Mozilla，自1999年起*/
空白：-预包装；/*Opera 4-6*/
空白：-o形预包装；/*Opera 7*/
换行：断开word；/*Internet Explorer 5.5+*/
溢出：隐藏；
高度：50px；
}

试试看

注意，

宽度

已被删除。
下面是一个演示输出的片段

ul.horizontal-Functions-list{
列表样式类型：无；
宽度：100%；
左侧填充：0；
填充顶部：10px；
垫底：10px；
保证金：0；
溢出-x：自动；
空白：nowrap；
背景色：蓝紫色；
}
ul.水平功能列表li{
显示：内联块；
缩放：1；
宽度：100px；
左边距：20px；
填充：20px；
背景颜色：绿黄色；
}
ul.水平功能列表li a{
显示：块；
颜色：灰色；
空白：预换行；/*css-3*/
空白：-moz预包装；/*Mozilla，自1999年起*/
空白：-预包装；/*Opera 4-6*/
空白：-o形预包装；/*Opera 7*/
换行：断开word；/*Internet Explorer 5.5+*/
溢出：隐藏；
高度：50px；
}

ul.horizontal-Functions-list{
列表样式类型：无；
宽度：100%；
左侧填充：0；
填充顶部：10px；
垫底：10px；
保证金：0；
溢出-x：自动；
空白：nowrap；
背景色：蓝紫色；
}
ul.水平功能列表li{
显示：内联块；
缩放：1；
宽度：100px；
左边距：20px；
填充：20px；
背景颜色：绿黄色；
}
ul.水平功能列表li a{
显示：块；
宽度：80px；
颜色：灰色；
/*新风格*/
空白：预包装；
}

ul.horizontal-Functions-list{
列表样式类型：无；
宽度：100%；
左侧填充：0；
填充顶部：10px；
垫底：10px；
保证金：0；
溢出-x：自动；
空白：nowrap；
背景色：蓝紫色；
}
ul.水平功能列表li{
显示：内联块；
缩放：1；
宽度：100px；
左边距：20px；
填充：20px；
背景颜色：绿黄色；
}
ul.水平功能列表li a{
显示：块；
宽度：80px；
颜色：灰色；
/*新风格*/
空白：预包装；
}

问题（和解决方案）

• 如果希望列表换行，请不要包含

  空白：nowrap

• 如果不需要滚动条，请不要包含

  overflow-x:auto

• 如果希望列表项包含它们所具有的文本，请不要在其上设置固定的

  宽度：100px

  （也不要在锚固件上设置，锚固件内部的

  宽度：80px

  ）

演示 我主要删除了您的样式，并设置了适当的

padding

和

margin

，以获得正确的间距

ul.horizontal-Functions-list{
保证金：0；
填充：0 20px 20px 0；
背景色：蓝紫色；
列表样式类型：无；
}
ul.水平功能列表li{
显示：内联块；
利润率：20px 0 0 20px；
填充：20px；
背景颜色：绿黄色；
}
ul.水平功能列表li a{
颜色：灰色；
}

中间的空间

问题（和解决方案）

• 如果希望列表换行，请不要包含

  空白：nowrap

• 如果不需要滚动条，请不要包含

  overflow-x:auto

• 如果希望列表项包含它们所具有的文本，请不要在其上设置固定的

  宽度：100px

  （也不要在锚固件上设置，锚固件内部的

  宽度：80px

  ）

演示 我主要删除了您的样式，并设置了适当的

padding

和

margin

，以获得正确的间距

ul.horizontal-Functions-list{
保证金：0；
填充：0 20px 20px
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;
  */
}