Wie erzwinge HTML-Elemente in eine Zeile?

Question

Ich habe einige Elemente wie:

Texttttttttttttttttttttttttttttttttttttttttttt... 
             Float text 

aber ich will es sein wie:

Texttttttttttttttttttttttttttttttttttt...Float text 

Ich versuche zu verwenden, um die absolute Position

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

Das ist etwas wie angezeigt wird Methode, aber auf diese Weise werden die Ellipsen nicht angezeigt.

Gibt es eine Möglichkeit, das kann ich tun?

HINWEIS:

Nicht sicher, was falsch ist, aber viele Leute vorschlagen, mit der Inline-Block oder Spanne Weise muss beide nicht funktionieren. Während man den Fließtext vor 'Textttt' setzt, funktioniert es.

Answer 1

Setzen Sie den rechten schwebten Block vor dem Text, den Sie es mit in Linie sein wollen.

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

https://jsfiddle.net/pkfwnan7/

Answer 2

Verwenden display: inline-block zu machen, die div Inline

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

Answer 3

Versuchen Sie, alles in einer span class Einwickeln

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

Answer 4

aktualisieren

Für eine der folgenden Lösung haben Sie Ellipsen auf dem linken Text, es braucht eine Breite festgelegt, entweder explizit oder durch den nicht genügend Platz und overflow: hidden/haben.

Sie mögen dies zu tun, wo die äußere div (wrap) hat white-space: nowrap und die inneren Displays wie 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>

Oder mit 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 5

Verwendung Spanne statt

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

Oder setzen display: inline-block; auf die div-Elemente

Auch die Mutterelementbreite haben nicht fixiert sicher. Aber das wird kein Problem sein, da Sie white-space: nowrap;

Answer 6

Setzen Sie den Text in eine Spanne. Keine Notwendigkeit, zu CSS hinzuzufügen.

<span>Text Here</span> 

Answer 7

die gebuchten Antworten sind etwas richtig, aber Sie können sogar Ihre Markup vereinfachen:

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

Fiddle

Die Leerzeichen Eigenschaft verwendet wird, zu beschreiben, wie Leerzeichen innerhalb des Elements ist abgewickelt.

nowrap Collapses Leerzeichen wie für normale, sondern unterdrückt Zeilenumbrüche (Textumbruch) innerhalb Text.

MDN on white-space

Answer 8

beide Elemente Geben Sie eine Anzeige: inline-block-Eigenschaft. Sie hatten mehrere Anführungszeichen und ein schließendes div-Tag fehlte. All dies wurde behoben und kann in diesem JSFiddle gesehen werden.

Die aktualisierte html unter:

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

Answer 9

versuchen Bootstrap

<div class="row"> 
    <div class="col-md-8">Texttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</div> 
    <div class="col-md-4">Float text</div> 
    </div>