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
Webdesign: Wenn der Titel nicht vollständig angezeigt werden kann
<br />Ich habe mir heute die neu gestaltete ...
Was bedeutet das „a“ in rgba? CSS RGBA-Farbleitfaden
RGBA ist eine CSS-Farbe, mit der Farbwert und Tra...
Erstellen einer verteilten Selenium-Umgebung basierend auf Docker
1. Laden Sie das Bild herunter Docker-Pull Seleni...
Eine kurze Analyse der Konfigurationselemente des Angular CLI-Releasepfads
Vorwort Bei der Projektfreigabe ist immer eine Ve...
Vergleich zwischen Node.js und Deno
Inhaltsverzeichnis Vorwort Was ist Deno? Vergleic...
Verwandte Vorgänge zum Hinzufügen und Löschen von Indizes in MySQL
Inhaltsverzeichnis 1. Die Rolle des Index 2. Erst...
Implementierungscode für die Schiebeschalterfunktion der Registerkarte „Links“ und „Rechts“ des WeChat-Applet
Effektbild: 1. Einleitung Ihr eigenes Applet muss...
So stellen Sie die MySQL5.7-Kodierung auf utf8mb4 ein
Ich bin vor kurzem auf ein Problem gestoßen. Die ...
So fügen Sie einem Hintergrundbild in CSS3 eine Farbmaske hinzu
Vor einiger Zeit stieß ich während der Entwicklun...
Detaillierte Erklärung des Docker-Befehls zum Sichern des Linux-Systems
Tar-Backup-System sudo tar cvpzf backup.tgz --exc...
Beispiel für die Ausführung eines MySQL-Befehlszeilenskripts
Dieser Artikel veranschaulicht anhand eines Beisp...
Lombok-Implementierung JSR-269
Vorwort Einführung Lombok ist ein praktisches Too...
Der bequemste Weg, einen Zookeeper-Server in der Geschichte zu erstellen (empfohlen)
Was ist ZooKeeper ZooKeeper ist ein Top-Level-Pro...
Verwendung des Linux-Befehls xargs
1. Funktion: xargs kann die durch Leerzeichen ode...
Integrationspraxis des Vue+Element-Hintergrundverwaltungsframeworks
Inhaltsverzeichnis Vue+ElementUI-Hintergrundverwa...