Ich versuche, das Front-End für eine sehr einfache Chat-Box mit Javascript, Css und HTML zu machen.Wie kann ich den Elementüberlauf mit CSS ausblenden?

Ich habe ein Element Überlauf Problem, wenn Benutzer die Größe des Fensters ändert, wenn der Chat mehr als 12 Nachrichten ist, überlaufen die Nachrichten aus dem Container.

machte ich einen jsfiddle so euch selbst ausprobieren können: https://jsfiddle.net/fb72uwwq/6/

In der Geige, klicken Sie auf die Schaltfläche Chat und Spam-Nachrichten in Ihrem Browser die Größe und Sie können sie überlaufen sehen.

Ich versuchte einige Stapelüberlauf Antworten, aber overflow: hidden; hat nicht funktioniert. Wie kann ich das lösen?

Quelle

2017-08-12 quad

die einfache Antwort ist, dass Sie nicht die Margen nach unten das Hinzufügen sollte den gewünschten Effekt zu erzeugen. Wenn Sie können, sollten Sie sich stattdessen mit flexbox beschäftigen (obwohl es in alten Browsern nicht funktioniert). Javascript verwendet keine statischen Typen, daher sind Number (Key) und key.toString() nicht erforderlich. –

Wenn Sie die Höhe auf 100% setzen, sollte das Problem behoben sein. c.style.height = "100%"; –

css

#chat{ 
    height: 100% !important; 
    overflow-y: hidden; 
    /* if you want to scroll on overflow, you can use overflow-y: scroll; or overflow-y: auto; */ 
}

Quelle

2017-08-13 00:36:27

overflow: hidden wird nicht funktionieren, weil Sie die Nachrichten überhaupt nicht in den Container platzieren. Stattdessen stapeln Sie sie mit absoluter Positionierung und berechnetem unteren Rand als Geschwister. Mit Ihrem aktuellen Markup gibt es keine Möglichkeit, die Nachrichten oben zu trennen, es sei denn, Sie möchten das auch von Hand berechnen.

Auch Ihre Frage ist nicht sehr klar: Möchten Sie das Hinzufügen von Nachrichten beenden, wenn sie sich außerhalb des Containers befinden oder wenn Sie sie nur auf dem Bildschirm ausschneiden möchten (aber sie wären immer noch im DOM sichtbar).

In beiden Fällen können Sie Ihre aktuelle Struktur viel sein verbessert, wenn Sie es auf folgende Weise erstellen:

<div id=chat> 
    <input type=text id=chat-message> 
    <div class=message>First message</div> 
    <div class=message>Second message</div> 
    <div class=message>Third message</div> 
</div>

Auf diese Weise alles, was Sie tun müssen, um sie wie Sie es machen angezeigt werden soll Flexbox verwenden :

#chat { 
    display: flex; 
    flex-direction: column-reverse; /* from bottom to top */ 
}

Ihr JavaScript wird auch viel einfacher sein, da Sie nur ein neues Element als das letzte Kind von #chat, also keine zusätzlichen Berechnungen zu schaffen werden. (Sie können die ältesten Nachrichten immer noch entfernen, nachdem eine bestimmte Anzahl von Nachrichten auf dem Bildschirm angezeigt wurde).

Quelle

2017-08-13 00:14:25

Das Festlegen der Höhe auf 100% sollte das Problem beheben.

c.style.height = "100%";

Quelle

2017-08-13 00:24:03

Wie kann ich den Elementüberlauf mit CSS ausblenden?

Antwort

css

Verwandte Themen