Der CSS-Stil löst das Problem der Anzeige von Auslassungspunkten, wenn der Text zu lang ist
1. Der CSS-Stil löst das Problem der Anzeige von Auslassungspunkten bei zu langem Text1. Allgemeiner StilIm Allgemeinen kann bei CSS-Stilen ein Zeilenumbrucheffekt auftreten, wenn die Breite nicht ausreicht. Dieser Effekt ist manchmal definitiv nicht akzeptabel und Sie können den CSS-Stil ändern, um dieses Problem zu lösen.
<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Textüberlauf</title>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
<style type="text/css">
.demo-split {
Breite: 500px;
Höhe: 100px;
Rand: 1px durchgezogen #dcdee2;
Hintergrund: blassgrün;
}
.demo-geteilter-Bereich {
Polsterung: 10px;
Farbe: rot;
}
</Stil>
</Kopf>
<Text>
<div id="app">
<div Klasse="demo-split">
<V-Modell aufteilen="aufteilen">
<div Slot="links" Klasse="demo-split-pane">
Keine Verwendung der adaptiven Clip-Breite</div>
<div slot="rechts" class="demo-split-pane">
Keine Verwendung von Auslassungspunkten mit adaptiver Breite</div>
</Teilen>
</div>
</div>
</body>
<Skripttyp="text/javascript">
neuer Vue({
el: '#app',
Daten() {
zurückkehren {
geteilt: 0,4
}
}
})
</Skript>
</html>Auf der linken Seite verringert sich die Breite, und der Text wird umbrochen.
Auf der rechten Seite verringert sich die Breite und der Text wird umbrochen.
2. Der Text ist zu lang und weist Auslassungspunkte oder einen Trunkierungseffekt auf
【Normalerweise geschrieben als:】
<style type="text/css">
.test_demo_clip {
Textüberlauf: Clip;
Überlauf: versteckt;
Leerzeichen: Nowrap;
Breite: 200px;
Hintergrund: blassgrün;
}
.test_demo_ellipsis {
Textüberlauf: Auslassungspunkte;
Überlauf: versteckt;
Leerzeichen: Nowrap;
Breite: 200px;
Hintergrund: blassgrün;
}
</Stil>
【veranschaulichen:】
Textüberlauf: Gibt an, ob bei einem Textüberlauf die Auslassungspunkte angezeigt werden sollen, „Ellipse“ gibt den Auslassungseffekt an und „Clip“ gibt den Clipping-Effekt an.
overflow:hidden; Überlaufenden Text ausblenden.
white-space:nowrap; verbietet Textumbruch.
Breite: (optional) Sie können einen festen Wert festlegen oder den Anzeigeeffekt so einstellen, dass er sich an die Breite anpasst.
<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Textüberlauf</title>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
<style type="text/css">
.test_demo_clip {
Textüberlauf: Clip;
Überlauf: versteckt;
Leerzeichen: Nowrap;
Breite: 200px;
Hintergrund: blassgrün;
}
.test_demo_ellipsis {
Textüberlauf: Auslassungspunkte;
Überlauf: versteckt;
Leerzeichen: Nowrap;
Breite: 200px;
Hintergrund: blassgrün;
}
.test_demo_defined_Width_clip {
Textüberlauf: Clip;
Überlauf: versteckt;
Leerzeichen: Nowrap;
Hintergrund: Biskuitporzellan;
}
.test_demo_definierte_Breite_ellipsis {
Textüberlauf: Auslassungspunkte;
Überlauf: versteckt;
Leerzeichen: Nowrap;
Hintergrund: Biskuitporzellan;
}
.demo-split {
Breite: 500px;
Höhe: 100px;
Rand: 1px durchgezogen #dcdee2;
Hintergrund: blassgrün;
}
.demo-geteilter-Bereich {
Polsterung: 10px;
}
</Stil>
</Kopf>
<Text>
<div id="app">
<h2>Textüberlauf: Clip </h2>
<div Klasse="test_demo_clip">
Keine Auslassungszeichen anzeigen, sondern nur Zuschneidebalken</div>
<br>
<h2>Textüberlauf: Auslassungspunkte </h2>
<div Klasse="test_demo_ellipsis">
Wenn der Text über das Objekt hinausläuft, wird ein Auslassungszeichen angezeigt.
<br>
<h2>Benutzerdefinierte Breite, adaptive Größe entsprechend der Breite</h2>
<div Klasse="demo-split">
<V-Modell aufteilen="aufteilen">
<div Slot="links" Klasse="demo-split-pane">
<div Klasse="test_demo_defined_Width_clip">
Adaptive Breite des Clips verwenden</div>
</div>
<div slot="rechts" class="demo-split-pane">
<div Klasse="test_demo_defined_Width_ellipsis">
Verwenden Sie Auslassungspunkte mit adaptiver Breite</div>
</div>
</Teilen>
</div>
</div>
</body>
<Skripttyp="text/javascript">
neuer Vue({
el: '#app',
Daten() {
zurückkehren {
geteilt: 0,4
}
}
})
</Skript>
</html>Clip zeigt den Effekt des Zuschneidens und Ellipse zeigt den Effekt der Auslassungspunkte.
Zusammenfassen Oben ist der CSS-Stil, den ich Ihnen vorgestellt habe, um das Problem der Anzeige von Auslassungspunkten zu lösen, wenn der Text zu lang ist. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
>>: Einführung in 10 Hooks in React
Artikel empfehlen
Lösen Sie die Probleme, die bei der Installation von MySQL 8.0 auf einem Win10-System auftreten
Bei der Installation von MySQL 8.0 auf einem Win1...
Beispiel zum Deaktivieren der Browser-Cache-Konfiguration im Vue-Projekt
Beim Freigeben eines Projekts müssen Sie häufig d...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 auf dem Mac
MySQL 5.7.13 Installations-Tutorial für Mac, sehr...
So ändern Sie die Größe von Partitionen in CentOS7
Gestern habe ich jemandem bei der Installation ei...
MySQL-Experiment: Verwenden von Explain zur Analyse des Indextrends
Überblick Die Indizierung ist eine Fähigkeit, die...
Der Einsatz von MySQL Triggern und worauf zu achten ist
Inhaltsverzeichnis Über Trigger Verwendung von Tr...
So mounten Sie die CD, um das RPM-Paket unter Linux zu finden
Vorne geschrieben Manchmal müssen Sie bei der Ver...
Zusammenfassung verschiedener Methoden zur MySQL-Datenwiederherstellung
Inhaltsverzeichnis 1. Einleitung 2. Direkte Wiede...
JavaScript zum Erzielen eines Klickbild-Flip-Effekts
Ich habe kürzlich an einem Projekt zur Gesichtser...
Einige Vorschläge zur Linux-Systemoptimierung (Kerneloptimierung)
Swap deaktivieren Wenn auf dem Server ein Datenba...
Detaillierte Erläuterung der Apache-Website-Dienstkonfiguration basierend auf Linux
Als Open-Source-Software ist Apache eine der am h...
Vier praktische Tipps für JavaScript-String-Operationen
Inhaltsverzeichnis Vorwort 1. Eine Zeichenfolge t...
Implementierungscode zum Speichern von Bildern in der MySQL-Datenbank und deren Anzeige auf der Front-End-Seite
Inhaltsverzeichnis 1. Erstellen Sie zunächst mit ...
Was bedeutet this.parentNode.parentNode (übergeordneter Knoten des übergeordneten Knotens)?
Der übergeordnete Knoten des übergeordneten Knoten...
Lernen Sie, wie Sie in 2 Minuten ein kreisförmiges/fächerförmiges Menü erstellen (Basisversion)
Vorwort Für das Projekt ist ein kreisförmiges Men...