如何将html元素强制为一行？答案

【问题标题】：How to force html elements into one line?如何将html元素强制为一行？
【发布时间】：2021-03-31 13:51:38
【问题描述】：

我有一些元素，例如：

    <div>
    <div style="overflow: hidden; white-space: nowrap; text-overflow:ellipsis"> 
Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
    <div style="float: right">Float text</div>
    </div>

这将显示如下内容：

Texttttttttttttttttttttttttttttttttttttttttttt...
                                       Float text

但我希望它是这样的：

Texttttttttttttttttttttttttttttttttttt...Float text

我尝试使用绝对位置的方法，但是这样省略号不会显示出来。

有什么办法可以做到吗？

注意：

不知道出了什么问题，但是很多人建议使用内联块或跨度方式，两者都不起作用。将浮动文本放在“Textttt”之前确实有效。

【问题讨论】：

标签： javascript html css web

【解决方案1】：

将右浮动块放在您希望它与之对齐的文本之前。

<div style="overflow: hidden; white-space: nowrap; text-overflow:ellipsis">
  <div style="float: right">Float text</div>
  Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>

https://jsfiddle.net/pkfwnan7/

【讨论】：

这太棒了，它确实有效，虽然我不知道为什么。

【解决方案2】：

更新

对于以下任一解决方案，如果要在左侧文本上使用省略号，则需要设置宽度，无论是显式设置还是空间不足并具有 overflow: hidden/text-overflow: ellipsis。

你这样做，外部 div (wrap) 有 white-space: nowrap，内部显示像内联块

.wrap {
  white-space: nowrap;
  max-width: 400px;
}
.wrap > * {
  display: inline-block;
  vertical-align: top;
}

.wrap > div:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

<div class="wrap">
  <div> 
    Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
    text text text text text text text text text text text text 
  </div>
  <div>Float text</div>
</div>

或display: table

.wrap {
  display: table;
  table-layout: fixed;
  width: 500px;
}
.wrap > * {
  display: table-cell;
}

.wrap > div:first-child div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="wrap">
  <div> 
    <div>Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</div>
  </div>
  <div>Float text</div>
</div>

【讨论】：

【解决方案3】：

使用 display:inline-block 使 div 内联

  <div>
    <div style="overflow: hidden; white-space: nowrap; text-overflow:ellipsis"> 
Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
    <div style="display:inline-block">Float text</div>
    </div>

【讨论】：

【解决方案4】：

改用 span

<span>Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</span>
<span>Float text</span>

或者在 div 元素上设置display: inline-block;

还要确保父元素没有固定宽度。但这不是问题，因为您使用的是white-space: nowrap;

【讨论】：

【解决方案5】：

将文本放在一个跨度中。无需添加到 CSS。

<span>Text Here</span>

【讨论】：

【解决方案6】：

发布的答案有些正确，但您甚至可以简化标记：

<div style="white-space: nowrap;"> 
   Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt Float text
</div>

Fiddle

white-space 属性用于描述元素内的空白是如何处理的。

无包装 像正常一样折叠空格，但抑制文本中的换行符（文本换行）。

MDN on white-space

【讨论】：

这不会满足 OP 的要求，因为 Texttttt… 不能用省略号缩短，同时以这种方式保留 Float text。

【解决方案7】：

给这两个元素一个 display:inline-block 属性。您缺少几个引号和一个结束 div 标记。所有这些都已修复，可以在 JSFiddle 中看到。

更新后的html如下：

<div>
   <div style="overflow: hidden; white-space: nowrap; text-overflow:ellipsis;display:inline-block"> 
       Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
   </div>
   <div style="float: right;display:inline-block">
       Float text
   </div>
</div>

【讨论】：

【解决方案8】：

尝试将所有内容包装在跨度类中

<span> 
    <div style="overflow: hidden; white-space: nowrap; text-overflow:ellipsis">
    </div>
</span> 

<span>
    <div style="float: right;">Float text</div>
    </div>
</span>

【讨论】：