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.

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.

• javascript
• html
• css
• web

Share Improve this question Follow edited Mar 21, 2016 at 15:22 dspjm asked Mar 21, 2016 at 14:32 dspjmdspjm 5,88077 gold badges4444 silver badges6464 bronze badges 0

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 3

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

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>

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>

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;

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

<span>Text Here</span>

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

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>

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>