Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie Auslassungspunkte, wenn die Anzahl der in der HTML-Textsteuerung angezeigten Zeichen den Grenzwert überschreitet

So verwenden Sie Auslassungspunkte, wenn die Anzahl der in der HTML-Textsteuerung angezeigten Zeichen den Grenzwert überschreitet

PHPz
PHPzOriginal
2018-05-18 17:02:3812910Durchsuche

Wie kann das Problem gelöst werden, dass die Anzahl der in der HTML-Textsteuerung angezeigten Wörter den Grenzwert überschreitet? Das heißt, der Textüberlauf steuert die Anzahl der angezeigten Wörter und der Tabellentextüberlauf steuert die Anzahl der in td angezeigten Wörter.

Wenn Sie den Titel sehen, werden Sie leicht an die Methode zum Abschneiden denken Text und fügen Sie die Auslassungspunkte „…“ hinzu. Haha, das ist es. Tatsächlich dient das Schreiben dieses Protokolls nur dazu, diese Methode aufzuzeichnen, da sich viele Menschen offenbar immer noch nicht daran erinnern, wie sie mit einer solchen Situation umgehen sollen.

Das Bild unten zeigt den Anzeigeeffekt der chinesischen PHP-Website (www.php.cn), der die Anzahl der Wörter überschreitet und Auslassungspunkte hinzufügt

So verwenden Sie Auslassungspunkte, wenn die Anzahl der in der HTML-Textsteuerung angezeigten Zeichen den Grenzwert überschreitet

Zuerst Lassen Sie mich zunächst erklären, dass DIV im Allgemeinen verwendet wird. Der Text im + CSS-Container, der die Länge überschreitet, schwebt außerhalb der Box oder erweitert die Box. Dies ist im Allgemeinen leicht zu lösen, aber ich bin heute auf dieses Problem gestoßen: Die Testseite hat es getan reagierte nicht unter IE6, aber die Testseite wurde unter IE8 normal verarbeitet. Ich war deprimiert, als ich den Überlauftext sah. Ist diese Überlaufverarbeitung nicht einzigartig für den IE? Warum funktioniert IE6 nicht richtig? Später habe ich online nachgesehen und herausgefunden, dass IE6 die Überlaufverarbeitung nur unterstützt, wenn sie in ein DIV geschrieben wird, und IE6 und höher unterstützt nur das Schreiben in

  • , also habe ich den gleichen Überlaufverarbeitungscode in DIV geschrieben und
  • Es ist normal, Schweiß! ! ! Hier ist ein Screenshot meiner Verarbeitung:
    Das Folgende ist der Code der HTML-Seite:

    So verwenden Sie Auslassungspunkte, wenn die Anzahl der in der HTML-Textsteuerung angezeigten Zeichen den Grenzwert überschreitet

    Das Folgende ist das Rendering (es wird dasselbe sein nach der Verarbeitung):

    So verwenden Sie Auslassungspunkte, wenn die Anzahl der in der HTML-Textsteuerung angezeigten Zeichen den Grenzwert überschreitet

    Das Folgende ist der Code für die beiden oben genannten Überlaufverarbeitungen:

    So verwenden Sie Auslassungspunkte, wenn die Anzahl der in der HTML-Textsteuerung angezeigten Zeichen den Grenzwert überschreitet

    Im Folgenden sind einige Verarbeitungsmethoden im Internet aufgeführt, die Ihre Referenz wert sind:

    Allgemeiner Text Kürzung (gilt für Inline und Block):
    [www.mb5u.com]

    .text-overflow {
    display:block;
    width:31em;
    word-break:keep-all;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    }

    Für die Definition des Tabellentextüberlaufs:
    ww.m5u.com]

    table{
    width:30em;
    table-layout:fixed;
    }
    td{
    width:100%;
    word-break:keep-all;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    }

    Was Sie beachten müssen, ist, dass dieses Zeug nur für eine einzelne Textzeile funktioniert, wenn Sie es für mehrere verwenden möchten Zeilen, nur die erste Zeile funktioniert. In dieser Schreibweise wird nur der IE „…“ verwenden. In anderen Browsern wird der Text ausgeblendet, wenn er die angegebene Breite überschreitet.

    Eingehende Untersuchung der chinesischen Textüberlaufverarbeitung in Opera und Firefox:
    [Problem]
    Kürzlich habe ich beim Durchsuchen unter Opera die rechte Hälfte meines Speicherplatzes festgestellt wird superbreit (ich verwende den gleichen Satzmodus wie Sie), sodass der Anzeigebereich von 1024 überschritten wird und eine horizontale Bildlaufleiste angezeigt wird, wenn das Fenster maximiert wird. Nach dem Löschen aller Module gemäß der von Ihnen angegebenen Methode besteht das Problem weiterhin dort Das ist so verwirrend...
    Ich habe mit einem anderen Durchgang einen neuen Raum geöffnet und das gleiche Layout verwendet, aber unter Opera gab es kein Problem!
    Liegt es daran, dass ich den erweiterten Raum während des Tests getestet habe? auf der rechten Seite sowie das Hinzufügen eines zweiten HTML-Moduls [und dessen anschließendes Löschen] und andere Vorgänge haben dazu geführt, dass mein Leerzeichencode durcheinander geraten ist?

    [Grund]

    Kompatibilitätsprobleme mit verschiedenen Browsern, um genau zu sein, sind Probleme mit der Implementierung von CSS-Standards durch verschiedene Browser. Zunächst sollten Sie wissen, dass nicht nur Opera angezeigt wird ungewöhnlich, Firefox Nein. Da Firefox ein anerkannter Standardbrowser ist [natürlich auch Opera] und einen höheren Marktanteil hat, wird Firefox für die Zertifizierung verwendet

    [Beispiel]

    1. Firefox unterstützt das Ellipsen-Attribut (...) nicht, d. h. eine lange Zeichenfolge zeigt Auslassungspunkte an Auf der Seite zum Bearbeiten des Weltraumprotokolls gibt es eine Anwendung. Wenn Sie einen sehr langen Kategorienamen eingeben und zum Bearbeiten des Protokolls zurückkehren, werden Sie feststellen, dass der ursprüngliche Kategoriename den ersten Teil im IE anzeigt und ihn dann direkt durch einen ersetzt Auslassungspunkte. In Browsern wie Firefox wird es jedoch sehr lange angezeigt, bis es platzt.2. In Firefox funktioniert
    style="overflow:hidden"
    nur mit < ;p> anstelle von usw.3 Im festen Linkteil kann der IE-Browser die Zeichenfolge umbrechen, die die Breite überschreitet Wenn die Adresslänge des festen Links 300 Pixel überschreitet, wird er automatisch umbrochen 🎜> in Browsern wie Firefox wird das Zeilenumbruch-Attribut nicht erkannt, da diese CSS-Eigenschaft nicht dem W3-Standard entspricht

    und sollte durch white-space:normal; ersetzt werden, damit Zeilenumbrüche unter Firefox korrekt sind und IE. Beachten Sie außerdem, dass Leerzeichen zwischen

    -Wörtern nicht zum Ersetzen verwendet werden dürfen, da sonst der Zeilenumbruch nicht korrekt sein kann.
    [Verwandt Empfehlungen]
    1. CSS löst das Problem, dass die Anzahl der Textwörter die Anzeigemethode der Auslassungspunkte übersteigt... (einzeiliger, mehrzeiliger Text)

    2.

    Verwenden Sie CSS, um das Problem der Überschreitung der Zeichenanzahl in der Titelanzeige zu lösen

    3

    Kostenloses Online-HTML-Video-Tutorial

  • Das obige ist der detaillierte Inhalt vonSo verwenden Sie Auslassungspunkte, wenn die Anzahl der in der HTML-Textsteuerung angezeigten Zeichen den Grenzwert überschreitet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn