如何强制html元素为一行？

Question

I have some elements like:

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

This will display something like:

Texttttttttttttttttttttttttttttttttttttttttttt...
                                       Float text

However I want it to be like:

Texttttttttttttttttttttttttttttttttttt...Float text

I try to use the absolute position method, but in this way, the ellipsis will not be shown.

Is there any way I can do this?

NOTICE:

Not sure what's wrong, but many people suggest with the inline block or span way, both doesn't work. While putting the float text before 'Textttt' DOES work.

Answer 1

Update

For either of the below solution to have ellipsis on the left text, it needs a width set, either explicit or by running out of space and have overflow: hidden / text-overflow: ellipsis .

You do like this, where the outer div ( wrap ) has white-space: nowrap and the inner displays like inline block

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

Or with 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

Put the right-floated block BEFORE the text you want it to be in line with.

<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

Use display:inline-block to make the div inline

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

Answer 4

use span instead

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

Or set display: inline-block; on the div elements

Also make sure the parent element does not have fixed width. But this will not be an issue since your'e using white-space: nowrap;

Answer 5

Put the text in a span. No need to add to CSS.

<span>Text Here</span>

Answer 6

Try wrapping everything inside a span class

 <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

The answers posted are somewhat right but you can even simplify your markup:

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

Fiddle

The white-space property is used to describe how whitespace inside the element is handled.

nowrap Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

MDN on white-space

Answer 8

Give both of the elements a display:inline-block property. You had several quotation marks and a closing div tag missing. All of this has been fixed and can be seen in this JSFiddle .

The updated html is below:

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