text-nowrap
![](https://img-blog.csdnimg.cn/direct/9f3718050cf04120a7b1c29572fa0599.png)
![](https://img-blog.csdnimg.cn/direct/144ca1284129418eb32bc0ff892fe039.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="https://www.w3school.com.cn/lib/bs/bootstrap.css" rel="stylesheet">
<!-- 引入 bootstrap.css -->
<script src="https://www.w3school.com.cn/lib/bs/bootstrap.js"></script>
<!-- 引入 bootstrap.js -->
<style>
p {
width: 150px;
}
</style>
</head>
<body>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ|ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p class="text-nowrap">
ABCDEFGHIJKLMNOPQRSTUVWXYZ|ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</body>
</html>
<!--
文本不换行:text-nowrap
注意!
text-nowrap通常用于防止文本换行,默认的是当页面上的文本达到一定数量后就会自动进行换行,即文本超出了页面容器的最大宽度,浏览器会自动换行。
-->