如何強制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>