热搜:前端 nest neovim nvim

css如何让div不换行

lxf2023-02-27 21:05:08

在css中,可以借助white-space特性让div不换行,只应该给div原素加上“white-space:nowrap;”款式就可以。white-space特性能设怎样处理原素里的空缺,当基础属性设为“nowrap”时可让特定元素文字不换行,其文字会在同一行上再次,直至碰到br标识才行。

css如何让div不换行

文中作业环境: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>

设计效果图:

css如何让div不换行

假如要让文本在一行显示,不必自动换行。将 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>

设计效果图:

css如何让div不换行

white-space 特性详细介绍

white-space 特性设定怎样处理原素里的空缺。

这一特性申明创建合理布局环节中怎样处理原素里的空白符。

基础属性:

  • normal 默认设置。空缺能被电脑浏览器忽视。

  • pre 空缺能被电脑浏览器保存。其行为模式相近 HTML 里的 <pre> 标识。

  • nowrap 文字不容易自动换行,文字会在同一行上再次,直至碰到 <br> 标识才行。

  • pre-wrap 保存空白符编码序列,可是正常的开展自动换行。

  • pre-line 合拼空白符编码序列,可是保存回车符。

  • inherit 要求应当从父元素传承 white-space 属性值。

【强烈推荐学习培训:css视频教学】

以上就是关于css如何让div不换行的具体内容,大量欢迎关注AdminJS其他类似文章!