在css中，可以借助white-space特性让div不换行，只应该给div原素加上“white-space:nowrap;”款式就可以。white-space特性能设怎样处理原素里的空缺，当基础属性设为“nowrap”时可让特定元素文字不换行，其文字会在同一行上再次，直至碰到br标识才行。
文中作业环境：Windows7系统软件、HTML5&&CSS3版、Dell G3计算机。
css让div不换行的办法
根据css能使相匹配div标识里的文字换行或不换行设定实际操作，下边我们来看一下应用css设定div标识里的文本不换行的办法。
默认设置前提下，假如 div 里的文本假如一行显示下不来得话，他会全自动折行表明。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AdminJS</title>
<style>
.content {
width: 150px;
height: 60px;
background-color: lightcyan;
}
</style>
</head>
<body>
<div class="content">
AdminJS 欢迎你 欢迎你 欢迎你
</div>
</body>
</html>设计效果图：
假如要让文本在一行显示，不必自动换行。将 white-space 款式设为 nowrap 就可以。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AdminJS</title>
<style>
.content {
width: 150px;
height: 60px;
background-color: lightcyan;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="content">
AdminJS 欢迎你 欢迎你 欢迎你
</div>
</body>
</html>设计效果图：
white-space 特性详细介绍
white-space 特性设定怎样处理原素里的空缺。
这一特性申明创建合理布局环节中怎样处理原素里的空白符。
基础属性：
normal 默认设置。空缺能被电脑浏览器忽视。
pre 空缺能被电脑浏览器保存。其行为模式相近 HTML 里的 <pre> 标识。
nowrap 文字不容易自动换行，文字会在同一行上再次，直至碰到 <br> 标识才行。
pre-wrap 保存空白符编码序列，可是正常的开展自动换行。
pre-line 合拼空白符编码序列，可是保存回车符。
inherit 要求应当从父元素传承 white-space 属性值。
【强烈推荐学习培训：css视频教学】
以上就是关于css如何让div不换行的具体内容，大量欢迎关注AdminJS其他类似文章！
声明：本文为原创，版权声明：本文采用[BY-NC-SA]协议进行授权,如无特别说明,转载必须注明本文地址!
原文地址：css如何让div不换行发布于2023-02-27 21:05:08
