html如何设置文字不换行

htML设置文字不换行的方法：1、一般的文字截断，代码为【word-break:keep-all; whITe-space:nowrap; 】；2、隐藏超出部分的内容，代码为【overflow:hidden; 】。

本教程操作环境：windows7系统、html5版，DELL G3电脑。

html设置文字不换行的方法：

一般的文字截断(适用于内联与块)：

      .text-oneLine{
                 display:block;
                /*内联对象需加*/            word-break:keep-all;
          /* 不换行 */            white-space:nowrap;
           /* 不换行 */            overflow:hidden;
              /* 内容超出宽度时隐藏超出部分的内容 */            text-overflow:ellipsis;
       /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;
一起使用。*/        }
    

对于表格，定义有所不同：

        table{
                width:30px;
                table-layout:fixed;
      /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */        }
        td{
                width:100%;
                word-break:keep-all;
         /* 不换行 */            white-space:nowrap;
          /* 不换行 */            overflow:hidden;
             /* 内容超出宽度时隐藏超出部分的内容 */            text-overflow:ellipsis;
      /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;
一起使用。*/        }
    

相关学习推荐：html视频教程

以上就是html如何设置文字不换行的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！