float und overflow hidden, Text kürzen

[MetallJ]

float und overflow hidden, Text kürzen

Hallo,

ich hoffe ich kann hier eine Antwort finden.

Folgendes möchte ich gerne erreichen: Ich habe ein div mit 100% Breite. Darin befinden sich verschiedene weitere divs, zwei davon sind links gefloated(Nr. 1 enthält ein Icon und Nr. 2 den Text(p), der gekürzt werden soll) und eines ist nach rechts gefloated(Enthält ebenfalls Icon). Ich möchte gerne, dass alle divs in einer Zeile sind und bei dem div mit dem Text, der Text gekürzt wird sobald der Text das nach rechts gefloatete div erreicht.

Ich kann keine Breite für die divs festlegen.

So sieht mein CSS aus:

.container {
    width: 100%;
}
.float-left {
    float: left;
}
.Titel p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.float-right {
    float:right;
}

So das HTML:

<div class="container">
    <div class="float-left Icon><span class=" icon ">Z</span>
    </div>
    <div class="float-left Titel ">
    <p>Dies ist ein sehr langer Text. Dies ist ein sehr langer Text. Dies ist ein sehr langer Text. Dies ist ein sehr langer Text.</p>
    </div>
    <div class="float-right ">
    <div class="rechts ">
        <a><span class="icon ">ICON</span></a>
    </div>
</div>
</div>

Edit fiddle - JSFiddle

Hat jemand eine Idee wie das geht?

Würde mich über viele Antworten freuen.

MetallJ

 

[Ap0ll0XT]

AW: float und overflow hidden, Text kürzen

Erst einmal solltest du den HTML-Code von Fehlern befreien:

<div class="float-left Icon>

Da fehlen Anführungszeichen. Der Code der danach kommt wird unter Umständen zu Grütze.
Außerdem wird der Text automatisch in zeilen umgebrochen. versuch neben Overflow auch noch einmal folgendes:

white-space: nowrap;

 

[MetallJ]

AW: float und overflow hidden, Text kürzen

OK, Quellttextfehler stimmt natürlich, habe ich jetzt behoben. Edit fiddle - JSFiddle

Ich habe doch bereits white-space und overflow eingesetzt. Wo soll ich das jetzt noch machen?

 

[DarkMo]

AW: float und overflow hidden, Text kürzen

.container {
    width: 100%;
}
.float-left {
    float: left;
    max-width:89%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.Titel p {
    white-space: nowrap;
    display: inline;
}
.float-right {
    float:right;
}

habs mal so probiert - in der vorschau passts ><

 

[Ap0ll0XT]

AW: float und overflow hidden, Text kürzen

OK, Quellttextfehler stimmt natürlich, habe ich jetzt behoben. Edit fiddle - JSFiddle

Ich habe doch bereits white-space und overflow eingesetzt. Wo soll ich das jetzt noch machen?

Ooops das hatte ich übersehen. Mein Fehler.

 

[MetallJ]

AW: float und overflow hidden, Text kürzen

habs mal so probiert - in der vorschau passts ><

Ja, passt, nur dass die Breite oder auch die Maximalbreite nicht gesetzt werden darf, da der Bereich rechts in der Breite variabel ist. Also gerne auch mal 15% einnimmt. Dann überlappt sich das mit den89%. Das ist nämlich das Problem

 

[DarkMo]

AW: float und overflow hidden, Text kürzen

hmm hmm, ist die frage, ob er das ohne feste breitenangabe überhaupt umsetzen kann. kannst es ja probieren, aber ich befürchte, dann gehts nich mehr. einzige lösung die mir spontan noch einfiele: ne einzeilige tabelle mit 3 spalten ^^ die tabelle bekommt ne breite von 100% und die mittlere zelle 99% - dann werden sich die zellen links und rechts ihren platz suchen und den rest sucht sich die mittlere aus. die bekommt dann noch dieses nowrap und text-overflow - voila *denk* ^^


edit: was passiert eigentlich, wenn dein äusseres div ein nowrap bekommt? wenn die inneren div's inline sind, also keinen zeilenumbruch erzwingen, vllt unterdrückt er das dann bei überlänge eines inneren div's?

 

[MetallJ]

AW: float und overflow hidden, Text kürzen

edit: was passiert eigentlich, wenn dein äusseres div ein nowrap bekommt? wenn die inneren div's inline sind, also keinen zeilenumbruch erzwingen, vllt unterdrückt er das dann bei überlänge eines inneren div's?

Das klappt leider auch nicht. Also werde ich - wohl oder übel - doch die Breite festlegen müssen.

Danke nochmal für eure Hilfe