文本流到下一行答案

【问题标题】：Text flowing to next line文本流到下一行
【发布时间】：2019-10-01 12:50:50
【问题描述】：

我在 html 中有以下内容：

.horizontal-div {
  display: flex;
  flex-direction: row;
}

.style-1 {
  width: 140px;
  height: 19px;
  font-size: 16px;
  color: #272d37;
  margin-top: 19px;
  margin-left: 8px;
}

.style-2 {
  width: 16px;
  height: 16px;
  float: right;
  margin-left: 295px;
  cursor: pointer;
}

<div class="horizontal-div">
  <div class="style-1">Dummy QC</div>
  <div class="style-2">Some image</div>
</div>

我观察到“虚拟 QC”进入下一行，如下所示：

有什么办法可以避免它进入下一行？

【问题讨论】：

你真的需要为这些容器设置宽度吗？

标签： html css

【解决方案1】：

你可以使用 CSS white-space 属性

.horizontal-div {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
}

【讨论】：

【解决方案2】：

.style-1 {
  font-size: 16px;
  color: #272d37;
  margin-top: 19px;
  margin-left: 8px;
  flex-wrap: nowrap;
}

flex-wrap 会起作用。仅当调整页面大小以低于您声明的宽度时才会出现此问题。摆脱宽度，或对小屏幕/尺寸规则使用媒体查询。经过测试，这有效。将强制文本保持在一行。

【讨论】：

【解决方案3】：

你可以将溢出属性设置为 div，同时选择最适合你的值：

div.ex1 {
  overflow: scroll;
}

div.ex2 {
  overflow: hidden;
}

div.ex3 {
  overflow: auto;
}

div.ex4 {
  overflow: visible;
}

【讨论】：

这只会改变包装的样子。它不会避免包装。
然后使用空白属性