CSS 同行（同一行）的某些列不换行 white-space: nowrap;

一、问题展示

.row3 {
	// border: 1px solid green;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.left {
		color: #FFCDB0;
		font-weight: 300;
		display: grid;
		place-items: end;
	}
	.right {
		padding: 10rpx 20rpx;
		background-color: #E7986B;
		border-radius: $base-border-radius;
		color: white;
		display: grid;
		place-items: center;
		//固定宽度
		// width: 230rpx;
	}
}

二、个人解决思路

1. 通过固定宽度，使其被撑开

问题：rpx 在不同的机型 导致真正的宽度不一致，至使有的被撑的很宽

1. iphone5成功展示:
   
2. iphone15 宽出太多
   

三、百度解决方案

css让同行某列不换行
在CSS中，实现让同行（同一行）的某些列不换行，通常涉及到使用CSS的white-space属性以及display属性。下面是一些常见的方法来实现这一需求：

方法1：使用white-space和display

如果你希望在同一行内，某些元素不换行，可以使用white-space: nowrap;来阻止内容换行，并结合适当的display属性（如inline-block或inline-flex）来控制布局。

<div class="container">
  <div class="column nowrap">不换行的内容</div>
  <div class="column">可以换行的内容</div>
</div>

.container {
  display: flex;
}
.column {
  margin-right: 10px; /* 添加一些间距 */
}
.nowrap {
  white-space: nowrap;
}

方法2：使用display: inline-block;

这种方法类似于上面的方法，但更直接地使用了inline-block来控制布局。

示例：

<div class="container">
  <div class="nowrap">不换行的内容</div>
  <div>可以换行的内容</div>
</div>

.container div {
  display: inline-block;
  margin-right: 10px; /* 添加一些间距 */
}

.nowrap {
  white-space: nowrap;
}

方法3：使用display: inline-flex;或display: flex;结合flex-wrap: nowrap;

这种方法适用于更复杂的布局，特别是当你想在同一行内控制多个子元素的布局时。

示例：

<div class="container">
  <div class="nowrap">不换行的内容</div>
  <div>可以换行的内容</div>
</div>

.container {
  display: flex; /* 或者使用 inline-flex */
  flex-wrap: nowrap; /* 确保不换行 */
}

.nowrap {
  white-space: nowrap; /* 确保内容不换行 */
}

方法4：使用表格布局（Table Layout）

如果你是在一个表格中工作，可以使用表格布局来实现同行内某些列不换行。

示例：

<table>
  <tr>
    <td class="nowrap">不换行的内容</td>
    <td>可以换行的内容</td>
  </tr>
</table>

td {
  white-space: normal; /* 默认值，允许换行 */
}

.nowrap {
  white-space: nowrap; /* 不允许换行 */
}

以上方法可以根据你的具体需求和HTML结构选择使用。通常，使用white-space: nowrap;结合适当的display属性是最直接和有效的方法。