文章/答案/技术大牛

发布

问文本排到下一行
EN

Stack Overflow用户

提问于 2019-10-01 20:50:50

回答 3查看 57关注 0票数 0

我在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>

我观察到'Dummy QC‘转到下一行，如下所示：

有什么解决方案可以避免它进入下一行？

html

css

回答 3

Stack Overflow用户

发布于 2019-10-01 21:07:55

您可以使用CSS空白属性

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

票数 1

Stack Overflow用户

发布于 2019-10-01 21:22:43

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

flex-wrap将会起作用。仅当将页面大小调整为小于声明的宽度时，才会出现此问题。去掉宽度，或者使用媒体查询小屏幕/大小规则。经过测试，这是可行的。将强制文本停留在一行上。

票数 0

Stack Overflow用户

发布于 2019-10-01 21:02:19

将overflow属性设置为div，并从中选择最适合您的值：

div.ex1 {
  overflow: scroll;
}

div.ex2 {
  overflow: hidden;
}

div.ex3 {
  overflow: auto;
}

div.ex4 {
  overflow: visible;
}

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58185147

复制

相似问题

问文本排到下一行
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本排到下一行EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本排到下一行
EN