如何关闭文本自动换行？左侧文本需与右侧保持一致不换行

问题根源 #

你的左侧容器文本自动换行，主要是两个原因：

• 左侧<h1>未设置合适的边距，文本被右侧浮动的图片挤压，在初始20vw宽度的容器里无法完整显示，触发自动换行
• 缺少强制文本不换行的CSS属性，即使容器展开后，文本仍可能因宽度限制换行

解决方案 #

修改以下CSS规则即可实现左右侧文本行为一致：

1. 给左侧<h1>添加右侧边距 #

和右侧布局逻辑对齐，让文本避开右侧浮动的图片区域：

.left h1 {
  margin-right: 22vw; /* 匹配右侧h1的left边距，避开20vw宽度的图片+2vw间距 */
}

2. 强制文本不换行 #

给<h1>添加white-space: nowrap属性，阻止文本自动换行，超出容器的部分会被你已设置的overflow: hidden隐藏：

h1 {
  width: 90vw;
  height: 20vw;
  margin-top: 0%;
  font-size: 2vw;
  margin-left: 2vw;
  white-space: nowrap; /* 新增：强制文本单行显示 */
}

完整修改后的CSS代码 #

body {
  background-image: linear-gradient(90deg, rgb(220, 0, 0), rgb(0, 0, 220));
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover
}

.right {
  background-color: rgb(255, 255, 255);
  border: none;
  width: 20vw;
  transition-duration: 2s;
  height: auto;
  overflow: hidden;
  height: 20vw;
  border-radius: 3vw;
  float: right;
}

.left {
  background-color: rgb(255, 255, 255);
  border: none;
  width: 20vw;
  transition-duration: 2s;
  height: auto;
  overflow: hidden;
  height: 20vw;
  border-radius: 3vw;
}

.right:hover {
  width: 100%;
  height: 20vw;
  transition-duration: 2s;
}

.left:hover {
  width: 100%;
  height: 20vw;
  transition-duration: 2s;
}

h1 {
  width: 90vw;
  height: 20vw;
  margin-top: 0%;
  font-size: 2vw;
  margin-left: 2vw;
  white-space: nowrap; /* 强制单行 */
}

.right h1 {
  margin-left: 22vw;
}

.left h1 {
  margin-right: 22vw; /* 避开右侧图片 */
}

img {
  width: 20vw;
  height: 20vw;
  border-radius: 3vw;
  display: inline-flex;
}

.right img {
  float: left;
}

.left img {
  float: right;
}

逻辑说明 #

• white-space: nowrap：强制文本保持单行，不会因容器宽度不足自动换行
• .left h1的margin-right:22vw：和右侧布局对称，确保文本初始时在图片左侧的可用区域显示，避免被图片挤压导致换行

内容的提问来源于stack exchange，提问作者Rafal Lafar