html中怎么让text不换行,css如何让文本不换行？

在html中，连续的数字和字母，以及字母和数字的组合是不会自动换行的；而汉语文字或者其他国家的文字，是文字就会有换行。那么如何让文本不换行？下面本篇文章就来给大家介绍一下，希望对你们有所帮助。

在css中，可以使用white-space属性来强制文字不换行；通常我们使用white-space:nowrap来强制文本文字内容不换行，文本会在在同一行上显示，直到遇到
标签为止。

white-space属性设置或检索对象内文本显示方式。

语法：white-space : normal | nowrap;

属性值：normal：默认。空白会被浏览器忽略。

nowrap：文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。

示例1：

div {

width: 120px;

height: 60px;

line-height: 20px;

border: 1px dashed #ccc;

margin: 10px;

}

.demo {

white-space: nowrap

}

内容将会不被换行显示

内容将在一行内强制显示完整

效果图：

示例2：

.demo {

width: 300px;

border: 1px solid red;

}

.wrap {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

This is a long Wordddddddddddddddddddddddddddddddddddddddd!

This is a long Wordddddddddddddddddddddddddddddddddddddddd!

效果图：

说明：white-space:nowrap; 设置文字禁止换行(强制不换行)。

overflow:hidden; 设置把多余内容隐藏起来，不让多出来的内容撑破容器。

text-overflow:ellipsis; 设置多出的内容以省略号…来表达。