极客教程CSS 文字超出换行
在网页设计中，经常会遇到文字内容过长导致超出容器边界的情况。为了让文字内容能够自动换行，我们可以使用CSS来控制文字的换行方式。本文将详细介绍如何使用CSS来处理文字超出容器的情况，并提供多个示例代码供参考。
1. 使用word-wrap属性
word-wrap属性用于指定是否允许单词内换行。当设置为break-word时，如果一个单词太长无法完全显示在一行上，会自动换行。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Word Wrap Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will break into multiple lines if it exceeds the container width. geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容超出容器宽度时会自动换行。
2. 使用white-space属性
white-space属性用于控制元素内空白的处理方式。当设置为pre-wrap时，会保留空白字符并允许换行。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>White Space Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
white-space: pre-wrap;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will break into multiple lines if it exceeds the container width. geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容超出容器宽度时会自动换行。
3. 使用overflow-wrap属性
overflow-wrap属性用于指定是否允许单词内换行。当设置为break-word时，会在单词内换行。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Overflow Wrap Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
overflow-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will break into multiple lines if it exceeds the container width. geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容超出容器宽度时会自动换行。
4. 使用text-overflow属性
text-overflow属性用于指定当文本溢出容器时如何显示。当设置为ellipsis时，会在文本末尾显示省略号。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Overflow Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will be truncated with an ellipsis if it exceeds the container width. geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容超出容器宽度时会显示省略号。
5. 使用max-width属性
max-width属性用于指定元素的最大宽度。当文字内容超出最大宽度时，会自动换行。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Max Width Example</title>
<style>
.container {
max-width: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will break into multiple lines if it exceeds the maximum width. geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容超出最大宽度时会自动换行。
6. 使用word-break属性
word-break属性用于指定如何处理单词内的换行。当设置为break-all时，会在单词内换行。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Word Break Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
word-break: break-all;
}
</style>
</head>
<body>
<div class="container">
Thisisalongtextthatwillbreakintomultiplelinesifitexceedsthecontainerwidth.geek-docs.comgeek-docs.comgeek-docs.comgeek-docs.comgeek-docs.comgeek-docs.comgeek-docs.comgeek-docs.comgeek-docs.comgeek-docs.com
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容超出容器宽度时会在单词内换行。
7. 使用hyphens属性
hyphens属性用于指定是否允许单词内断字。当设置为auto时，会在单词内断字。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hyphens Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
hyphens: auto;
}
</style>
</head>
<body>
<div class="container">
Thisisalongtextthatwillbreakintomultiplelinesifitexceedsthecontainerwidth.geek-docs.comgeek-docs.comgeek-docs.comgeek-docs.comgeek-docs.comgeek-docs.comgeek-docs.comgeek-docs.comgeek-docs.comgeek-docs.com
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容超出容器宽度时会在单词内断字。
8. 使用text-align属性
text-align属性用于指定文本的对齐方式。当设置为justify时，会在单词之间添加空格使文本两端对齐。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Align Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
text-align: justify;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will be justified within the container width. geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容会在单词之间添加空格使文本两端对齐。
9. 使用line-height属性
line-height属性用于指定行高。当行高小于文字高度时，文字内容会自动换行。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Line Height Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
line-height: 1.5;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will break into multiple lines if it exceeds the container width. geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容超出容器宽度时会自动换行。
10. 使用text-justify属性
text-justify属性用于指定文本的对齐方式和断字规则。当设置为inter-word时，会在单词之间添加空格使文本两端对齐。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Justify Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
text-align: justify;
text-justify: inter-word;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will be justified within the container width. geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com geek-docs.com
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容会在单词之间添加空格使文本两端对齐。
以上是关于如何使用CSS处理文字超出容器时的换行问题的示例代码。通过合理运用这些CSS属性，可以有效地控制文字内容的显示方式，使网页设计更加美观和易读。