在网页设计中，有时我们需要让一些元素不换行，而是让它们全部显示在一行中，这时就需要用到 css。接下来，本文将向大家介绍如何用 css 让元素不换行。
一、white-space 属性
white-space 属性是控制元素中空格和换行的 CSS 属性之一。通过设置 white-space 属性，我们可以让元素不换行或者保留换行。
1.设置元素不换行
如果想让元素中的文本都在同一行显示，可以将 white-space 属性设置为 nowrap，如下所示：
立即学习“前端免费学习笔记（深入）”；
div{
white-space: nowrap;
}上述代码表示 div 元素中的文本都不换行。
2.保留换行
如果想保留元素中的换行，可以将 white-space 属性设置为 pre 或者 pre-wrap，如下所示：
div{
white-space: pre;
}div{
white-space: pre-wrap;
}二、display 属性
除了 white-space 属性，我们还可以使用 display 属性来实现元素不换行的效果。display 属性有两个值可以使用：inline 和 inline-block。
1.inline
将元素的 display 属性设置为 inline，可以让元素和文本在同一行显示，如下所示：
span{
display: inline;
}上述代码表示 span 元素和文本都在同一行显示。
2.inline-block
将元素的 display 属性设置为 inline-block，可以让元素和文本在同一行显示，但是可以设置元素的宽度和高度，如下所示：
div{
display: inline-block;
width: 100px;
height: 50px;
}上述代码表示 div 元素和文本都在同一行显示，并且设置了元素的宽度和高度。
三、overflow 属性
有时，长文本会导致元素自动换行，如果想防止元素换行，可以使用 overflow 属性。overflow 属性有两个值：visible 和 hidden。
1.visible
将元素的 overflow 属性设置为 visible，表示允许元素内容溢出元素框，如下所示：
div{
overflow: visible;
}2.hidden
将元素的 overflow 属性设置为 hidden，表示防止元素内容溢出元素框，如下所示：
div{
overflow: hidden;
}以上就是用 CSS 让元素不换行的三种方法：white-space 属性、display 属性和 overflow 属性。不同的情况下选择不同的方法，可以让网页达到更好的显示效果。
