css3不换行指的是在文本内容中设置一种样式，使其在遇到行末时不会自动换行，而是继续延伸到下一行。这种技术常常用于设计单行文本或代码区域等，可以让页面看起来更整洁清晰。
在CSS3中，不换行有两种常用的实现方法：white-space和word-wrap。接下来我们将逐一介绍并给出应用实例。
一、white-space
white-space 属性定义了如何处理元素中空白部分。
这个属性有以下可选值：
立即学习“前端免费学习笔记（深入）”；
应用实例：
<style>
.nowrap {
white-space: nowrap; /*文本不换行*/
}
.pre {
white-space: pre; /*保留所有空格与换行符*/
}
</style>
<div class="nowrap">这是一段不会换行的文本</div>
<div class="pre">这是一段<pre> 会 保 留 所 有 空 格
和 换 行 符 </pre>
</div>二、word-wrap
word-wrap 属性是一个用于指定一个超长的单词是否可以在换行时被截断放在第二行。实际应用中，在设置了较窄的容器宽度的时候，如果我们不希望单词被切割而希望能够换行，则应该设置该属性。
这个属性有以下可选值：
立即学习“前端免费学习笔记（深入）”；
应用实例：
<style>
.break-word{
word-wrap:break-word;
}
</style>
<div style="width:100px;border:1px solid #000;">
<p class="break-word">这是一个很长很长很长的单词：aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>以上就是CSS3不换行技术的简介及应用实例。通过合理的运用不换行技术，可以让页面变得更加灵活，增加设计的可拓展性。
以上就是CSS3不换行技术简介及应用实例的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
542
收藏
