在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; 设置多出的内容以省略号…来表达。