如何强制html元素为一行？

Question

我有一些元素，例如：

    <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' 之前确实有效。

Answer 1

更新

对于以下任一解决方案在左侧文本上有省略号，它需要一个宽度集，无论是显式的还是空间不足并有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>

Answer 2

将右侧浮动块放在您希望它与之一致的文本之前。

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

https://jsfiddle.net/pkfwnan7/

Answer 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>

Answer 4

改用跨度

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

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

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

Answer 5

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

<span>Text Here</span>

Answer 6

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

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

Answer 7

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

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

小提琴

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

nowrap像正常一样折叠空白，但禁止文本中的换行符（文本换行）。

空白区域的 MDN

Answer 8

给这两个元素一个 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>