css-强制不换行显示

xyc · 发表于 2021-8-23 15:47:50

   项目中会遇到多个英文单词默认自动换行，单行字母不自动换行的情况，如果想让一行显示不换行的话该怎么处理呢，下面就来说下强制内容不换行的解决方法。
   默认代码：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>苏飞论坛</title>
		<style>
			div{
				margin-top: 100px;
				margin-left: 200px;
				width:120px;
				height:180px;
				border:1px solid red;
				padding:5px;
			}
		</style>
	</head>
	
	<body>  
		<div class="div">
			bbbbbbbbbbbbbbbbbbbbbbbb
		</div>
		<div class="div1">
			My wish is world peace
		</div>
	</body>
</html>

默认效果：

不换行实现方法：

[XML] 纯文本查看 复制代码

white-space: nowrap;

加入后效果：

这样在div样式内加入white-space: nowrap;样式后，内容就不再换行显示了。

		自动登录	找回密码
密码			马上注册

[CSS] css-强制不换行显示

相关帖子