极客教程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 be broken into multiple lines if it exceeds the container width.
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容超出容器宽度时会自动换行。
2. 使用 overflow-wrap 属性
overflow-wrap 属性用于指定是否允许单词内部换行。当设置为 break-word 时，与 word-wrap 属性的效果相同，会将单词拆分成多行显示。
示例代码如下：
<!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 be broken into multiple lines if it exceeds the container width.
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容超出容器宽度时会自动换行。
3. 使用 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 be broken into multiple lines if it exceeds the container width.
</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.
</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 be broken into multiple lines if it exceeds the maximum width.
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容超出最大宽度时会自动换行。
6. 使用 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 if it exceeds the container width.
</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">
This is a long text that will be hyphenated if it exceeds the container width.
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容超出容器宽度时会自动断字。
8. 使用 line-break 属性
line-break 属性用于指定如何处理换行符。当设置为 strict 时，浏览器会在换行符处强制换行。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Line Break Example</title>
<style>
.container {
width: 200px;
border: 1px solid #ccc;
line-break: strict;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will be broken into multiple lines if it exceeds the container width.
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容超出容器宽度时会在换行符处强制换行。
9. 使用 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">
Thisisalongtextthatwillbebrokenintomultiplelinesifitexceedsthecontainerwidth.
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容超出容器宽度时会在单词内部任意位置换行。
10. 使用 overflow 属性
overflow 属性用于指定当内容溢出容器时的处理方式。当设置为 scroll 时，会显示滚动条以便查看超出部分的内容。
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Overflow Example</title>
<style>
.container {
width: 200px;
height: 100px;
border: 1px solid #ccc;
overflow: scroll;
}
</style>
</head>
<body>
<div class="container">
This is a long text that will be shown with a scroll bar if it exceeds the container width.
</div>
</body>
</html>
代码运行结果:
运行结果：文字内容超出容器宽度时会显示滚动条。
通过以上示例代码，我们可以看到如何使用不同的 CSS 属性来实现文字超出换行的效果。根据实际需求和设计要求，选择合适的属性来控制文字的显示方式，使页面内容更加美观和易读。