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
Detaillierte Erklärung der CSS-Elastic-Box Flex-Grow, Flex-Shrink und Flex-Basis
Die Funktionen der drei Attribute Flex-Grow, Flex...
Vue3 Vue-Ereignisbehandlungshandbuch
Inhaltsverzeichnis 1. Grundlegende Ereignisbehand...
Verwendung des Linux-Befehls ifconfig
1. Befehlseinführung Der Befehl ifconfig (Netzwer...
Lösung für gelegentliche Abstürze des Positionierungs-Hintergrunddienstes unter Linux
Problembeschreibung Im aktuellen Hintergrunddiens...
Detailliertes Tutorial zur Verwendung von Docker zum Erstellen einer Laravel-Entwicklungsumgebung in der Win10-Home-Version
Betriebssystem: Win10 Home Edition Installieren S...
Zusammenfassung mehrerer häufig verwendeter CentOS7-Images basierend auf Docker
Inhaltsverzeichnis 1 Docker installieren 2 Konfig...
Zweistündiges Docker-Einführungstutorial
Inhaltsverzeichnis 1.0 Einleitung 2.0 Docker-Inst...
Markodwns ausführliche Erklärung der Idee des synchronen Scrollens mit Titelausrichtung
Vorwort Ich muss dem Markodwn-Editor, den ich ger...
Eine ausführliche Zusammenfassung der Überlegungen zu MySQL-Zeiteinstellungen
Existiert die Zeit wirklich? Manche Menschen glau...
Neue interaktive Erfahrungen mit Online-Werbung bei der Website-Erstellung (grafisches Tutorial)
Mit der zunehmenden Reife des Internetzeitalters ...
4 Möglichkeiten, mit CSS ein zweispaltiges Layout mit fester linker Spalte und adaptiver rechter Spalte zu erreichen
1. Float + Überlauf: versteckt Diese Methode löst...
Wie man die Idee von Vue nutzt, um einen Speicher zu kapseln
Inhaltsverzeichnis Hintergrund Funktion Zweck Ide...
Anweisungen zur Verwendung der MySQL-Isolations-Leseansicht
Welche historische Version kann die aktuelle Tran...
Verwenden Sie Docker Compose, um ELK schnell bereitzustellen (getestet und effektiv)
Inhaltsverzeichnis 1. Übersicht 1.1 Definition 1....
Implementierung der Änderung von Konfigurationsdateien im Docker-Container
1. Betreten Sie den Container docker run [Option]...