如何使用 CSS 防止项目列表中的换行符？

在进行网站开发的过程中，很常出现项目列表中项目内容过长导致出现换行符的问题。这不但降低了页面的美观度，也对用户的阅读体验造成了影响。因此，本文将介绍如何使用 CSS 防止项目列表中的换行符。

问题分析

如下所示的无序列表，当项目内容过长时会自动折行，导致列表项显示不全，且布局混乱。

• 项目1
• 很长很长的项目2，它很长很长很长很长很长很长很长，导致出现了换行符
• 项目3

解决方案

方案一：使用 word-wrap

word-wrap 属性允许文本在任意位置断行，而不会产生额外的换行符。可以将其设置为 break-word，表示单词内允许换行。

ul {
  word-wrap: break-word;
}

方案二：使用 white-space

white-space 属性用于设置如何处理元素内的空白，可将其设置为 nowrap，表示禁止换行。

li {
  white-space: nowrap;
}

方案三：使用 text-overflow

text-overflow 属性用于指定当文本溢出包含它的元素时发生的条件。可以将其设置为 ellipsis，表示用省略号表示被截断的文本。

li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

总结

本文介绍了三种方法，使用 word-wrap 属性、white-space 属性和 text-overflow 属性，可以避免在项目列表中出现换行符的问题。根据实际情况，选择适合自己的方法进行解决。

返回代码片段如下：

# 如何使用 CSS 防止项目列表中的换行符？

在进行网站开发的过程中，很常出现项目列表中项目内容过长导致出现换行符的问题。这不但降低了页面的美观度，也对用户的阅读体验造成了影响。因此，本文将介绍如何使用 CSS 防止项目列表中的换行符。

## 问题分析

如下所示的无序列表，当项目内容过长时会自动折行，导致列表项显示不全，且布局混乱。

- 项目1
- 很长很长的项目2，它很长很长很长很长很长很长很长，导致出现了换行符
- 项目3

## 解决方案

### 方案一：使用 word-wrap

word-wrap 属性允许文本在任意位置断行，而不会产生额外的换行符。可以将其设置为 break-word，表示单词内允许换行。

```css
ul {
  word-wrap: break-word;
}

方案二：使用 white-space

white-space 属性用于设置如何处理元素内的空白，可将其设置为 nowrap，表示禁止换行。

li {
  white-space: nowrap;
}

方案三：使用 text-overflow

text-overflow 属性用于指定当文本溢出包含它的元素时发生的条件。可以将其设置为 ellipsis，表示用省略号表示被截断的文本。

li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

总结

本文介绍了三种方法，使用 word-wrap 属性、white-space 属性和 text-overflow 属性，可以避免在项目列表中出现换行符的问题。根据实际情况，选择适合自己的方法进行解决。