Überlaufversteckung: Die umfassendste Lösung für das Problem des Inhaltsüberlaufs mithilfe von CSS

Im p-Layout überschreiten einige Textinhalte die Höhe, die unser Limit überschreitet, und einige Bilder platzen im DIV, wodurch die Webseite falsch ausgerichtet und verwirrend wird. Was soll ich tun, wenn der Inhalt den Container überfüllt und die durch den Container begrenzte Breite und Höhe überschreitet? Sie können den Überlaufteil des -Textes ausblenden oder Auslassungspunkte verwenden, um zu ersetzen. In diesem Artikel erfahren Sie, wie Sie Zeilenumbrüche, Ellipsen usw. verwenden, um diese Überlaufprobleme zu lösen.

1. Verwenden Sie Zeilenumbrüche, um das Überlaufproblem zu lösen

1. So lösen Sie den Textüberlauf mit Zeilenumbrüchen Problem

word-break:break-all und word-wrap:break-word werden häufig verwendet, um das Problem des Zeilenumbruchs in langen Zeichenfolgen zu lösen.

word-break:break-all ist dasselbe in IE6/7/chrome/safari, wo es sich wie eine Endkürzung verhält, während ff3.0/opera sich wie ungültig verhält. Zu lange Wörter werden in neuen Zeilen angezeigt und überschreiten dann den Rand. word-wrap:break-word; ist in IE6/7/chrome/safari dasselbe. Es verhält sich so, als würden lange Wörter in neue Zeilen umgebrochen und abgeschnitten, wenn sie nicht mehr angezeigt werden könnten. Und ff3.0/opera scheint auch ungültig zu sein.

2.

So gehen Sie mit CSS-Überlauf und Zeilenumbrüchen um

Wenn der Text zu lang ist und nicht im Container angezeigt werden kann, tun Sie dies Sie möchten es umbrechen? Verwenden Sie das Attribut white-space: normal / nowrap, normal: übernehmen Sie die Standardeinstellungen des Browsers: nicht umbrechen. So gehen Sie mit Überlauf um: Wenn Sie den Überlaufinhalt ausblenden möchten, können Sie die Verwendung des Attributs
text-overflow

in Betracht ziehen.

3. Firefox/IE-Browser-Flash ist transparent, CSS wird nicht umbrochen, Überlauf wird ausgeblendet

CSS wird erzwungen nicht umbrechen, Überlauf Versteckt: overflow:hidden

Anweisungen und Punkte:

◎ Abrufen oder Festlegen, wie Inhalte verwaltet werden, wenn der Inhalt des Objekts seine angegebene Höhe überschreitet und Breite.

◎ Wenn Sie das Textarea-Objekt auf den ausgeblendeten Wert setzen, werden seine Bildlaufleisten ausgeblendet.

◎ Wenn für Tabellen das Attribut „table-layout“ auf „fixed“ gesetzt ist, unterstützt das td-Objekt das Attribut „overflow“ mit dem Standardwert „hidden“. Bei der Einstellung „Ausgeblendet“, „Scrollen“ oder „Automatisch“ werden Inhalte, die die TD-Größe überschreiten, abgeschnitten. Wenn es auf „Sichtbar“ gesetzt ist, wird zusätzlicher Text in die Zellen rechts oder links von ◎ überlaufen (je nach Einstellung des Richtungsattributs).

◎ Ab IE5 ist diese Eigenschaft auf der MAC-Plattform verfügbar. Die entsprechende Skriptfunktion ist Überlauf.

2. Verwenden Sie Auslassungspunkte, um das Überlaufproblem zu lösen

1 html Die Methode zur Verwendung von Ellipsen zur Steuerung der Anzeige von Text, der die Anzahl der Zeichen überschreitet

Wenn der Text in einem Container mit p+css die Länge überschreitet, wird er im Allgemeinen außerhalb der Box angezeigt oder erweitert . Manchmal müssen Sie Probleme mit der Browserkompatibilität berücksichtigen. Auch die Durchsetzung von CSS-Standards ist unterschiedlich. Da Firefox ein anerkannter Standardbrowser ist [natürlich auch Opera] und einen höheren Marktanteil hat, kann Firefox für die Zertifizierung verwendet werden.

2. CSS, j's einzeiliger und mehrzeiliger Textüberlauf zeigt Auslassungspunkte an

Im Projekt, aufgrund zu vieler tatsächlicher Beschreibungen Text, Die vertikale Länge der Seite ist zu lang, was auch die Nutzung der verbleibenden Informationen verringert. Daher ist es erforderlich, die Anzahl der einzeiligen und mehrzeiligen CSS zu initialisieren. Zeilentext läuft über und zeigt Ellipsen an. 3.

Eine Zusammenfassung der Methode zur Anzeige von Ellipsen beim Überlaufen von einzeiligem und mehrzeiligem Text

Im Front-End-Seitenlayout wird häufig das Seitenlayout beeinflusst durch zu viel Text. Insbesondere auf mobilen Seiten stört der Absatztext das Layout, wenn die Bildschirmbreite nicht ausreicht, wenn er vollständig angezeigt wird. Daher wäre es perfekt, wenn der Absatztext entsprechend der freien Größe des Bildschirms angezeigt werden könnte. Das heißt, wenn der Bildschirm groß genug ist, wird der Absatztext vollständig angezeigt teilweise in Form von Ellipsen dargestellt werden.

4. Die Inhaltsüberlauf-Layoutmethode in der Tabelle

Wir wissen, dass die Tabelle unübersichtlich wird, wenn wir zu viel Textinhalt in die Tabelle eingeben, beispielsweise eine Zeile Oder der Zeilenumbruch erfolgt automatisch. Aber manchmal möchten wir es in einer Zeile mit fester Breite anzeigen. Wenn der zusätzliche Teil durch Punkte ersetzt wird, wird die Tabelle dadurch nicht überfüllt.

5. Verwenden Sie CSS, um das Problem des Ersetzens von Ellipsen zu lösen, wenn die Anzahl der Zeichen im Titel das Limit überschreitet.

Schritt 1: Überschüssigen Inhalt ausblenden, wenn der Inhalt überschreitet die Breite

Schritt 2: Zeigen Sie das Auslassungszeichen (...) an, wenn der Text innerhalb des Objekts überläuft

Fragen und Antworten zum Überlaufen und Ausblenden von CSS-Inhalten

1. html – Wie kann ich mithilfe von Javascript feststellen, ob p übergelaufen ist?

2. css3 – Wenn die Liste horizontal überläuft, wird ein Auslassungszeichen angezeigt (das Auslassungszeichen ist ein Bild)

3 Die Höhe des internen Elements nach dem Überlauf wird ausgeblendet?

【Verwandte Empfehlungen】

1.

php.cn Dugu Jiujian (2) - CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonÜberlaufversteckung: Die umfassendste Lösung für das Problem des Inhaltsüberlaufs mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!