温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么在html中设置文字不换行

发布时间:2021-04-27 17:03:01 来源:亿速云 阅读:585 作者:Leah 栏目:web开发

这期内容当中小编将会给大家带来有关怎么在html中设置文字不换行,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

html有什么特点

1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。 2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。  3、平台无关性:超级文本标记语言能够在广泛的平台上使用,这也是万维网盛行的一个原因。 4、通用性:HTML是网络的通用语言,它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

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中设置文字不换行了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI