Lösung für das Problem der unvollständigen Anzeige des Inhalts der ausgewählten Dropdown-Box in HTML und der teilweisen Abdeckung

Lösung für das Problem der unvollständigen Anzeige des Inhalts der ausgewählten Dropdown-Box in HTML und der teilweisen Abdeckung
Heute ist mir ein Problem aufgefallen: Der Inhalt des Dropdown-Felds in der Abfrageleiste war zu lang, sodass ein Teil davon abgedeckt war.

Ich habe ein paar Informationen nachgeschlagen, bei manchen wurde gesagt, man solle eine Funktionssteuerung verwenden, bei manchen eine Ereignissteuerung, manches habe ich nicht verstanden und manche waren zu kompliziert in der Umsetzung. Später fragte ich einen Kollegen, ob es ein paar einfache Methoden gäbe. Er sagte mir, ich solle das Titelattribut in die Option einfügen. Also probierte ich seine Methode aus und fand schließlich heraus, dass diese Methode funktioniert. Deshalb möchte ich es aufschreiben, damit ich es nicht vergesse.

1. Die spezifischen Beispiele sind wie folgt

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Lösung für die unvollständige Anzeige des Inhalts ausgewählter Dropdown-Felder in HTML</title>
<style type="text/css">
#Bereichsoption{
Breite: 140px;
}
</Stil>
</Kopf>
<body style="Breite: 80 %; Höhe: 100px; Textausrichtung: Mitte;">
<div id="div_auswahl">
<label for="area">Buchstaben:</label>
<select id="Bereich" name="Bereich" style="width:150px;">
<option value="0">Alle</option>
<option value="1" title="AAAAAAAAAAAAAAAAAAAAAAAAAAAA">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</option>
<option value="2" title="BBBBBBBBBBBBBBBBBBBBBBBBBBBB">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</option>
<option value="3" title="CCCCCCCCCCCCCCCCCCCCCCCCCC">CCCCCCCCCCCCCCCCCCCCCCCCCCCC</option>
<option value="4" title="DDDDDDDDDDDDDDDDDDDDDDDDDD">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</option>
<option value="5" title="EEEEEEEEEEEEEEEEEEEEEEEE">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</option>
<option value="6" title="FFFFFFFFFFFFFFFFFFFFFFFFFFFF">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</option>
<option value="7" title="GGGGGGGGGGGGGGGGGGGGGGGGGGGGGG">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</option>
<option value="8" title="HHHHHHHHHHHHHHHHHHHHHHHHHHHHH">HHHHHHHHHHHHHHHHHHHHHHHHHHH</option>
<option value="9" title="IIIIIIIIIIIIIIIIIIIIIIIIIIIIII">IIIIIIIIIIIIIIIIIIIIIIIIIIIIII</option>
</Auswählen>
</div>
</body>
</html>

2. Beispielergebnisse



3. Dynamische Daten

Code kopieren
Der Code lautet wie folgt:

<div id="div_auswahl">
<label for="area">Provinz:</label>
<select id="Bereich" name="Bereich" style="width:150px;">
<option value="0">Alle</option>
<c:forEach Elemente="${Liste}" var="Bereich">
<option value="${area.areaCode}" title="${area.areaName}">${area.areaName}</option>
</c:fürJeden>
</Auswählen>
</div>

<<:  Beispielcode für CSS-Layout an beiden Enden (unter Verwendung des negativen Rands des übergeordneten Elements)

>>:  Implementierung des MySQL Shell import_table-Datenimports

Artikel empfehlen

FEHLER 1045 (28000): Zugriff verweigert für Benutzer ''root''@''localhost'' (mit Passwort: JA) Praktische Lösung

Gestern gab es keine Probleme beim Herstellen ein...

Reines CSS, um nach Auswahl des Produkts das Zeichen √ in der unteren rechten Ecke anzuzeigen

Empfohlene Artikel: Klicken Sie auf die untere re...

HTML ungeordnete Liste Aufzählungspunkte mit Bildern CSS schreiben

Erstellen Sie eine HTML-Seite mit einer ungeordnet...

Zusammenfassung wissenschaftlicher Grundlagen und Anregungen für Webdesign und -produktion

<br />Im Bereich des Netzwerkdesigns erfreut...

33 der besten kostenlosen englischen Schriftarten geteilt

ChunkFive Freie Schriftfamilie Cuprum JAH I Kosten...

Nginx-Konfigurationsvorgang für den externen Netzwerkzugriff auf die Intranet-Site

Hintergrund: Die Site ist vom Front- und Back-End...

MySQL-Datenaggregation und -gruppierung

Wir müssen Daten häufig zusammenfassen, ohne sie ...

VUE implementiert Token-Anmeldeüberprüfung

In diesem Artikelbeispiel wird der spezifische Co...

Implementierung des Deployment-War-Package-Projekts mit Docker

Um War mit Docker bereitzustellen, müssen Sie ein...

Optimieren Sie MySQL mit 3 einfachen Tricks

Ich erwarte nicht, ein erfahrener Datenbankadmini...

Detaillierte Erklärung der Javascript-String-Methoden

Inhaltsverzeichnis Zeichenfolgenlänge: Länge char...

Detaillierte Erklärung zum Ziehen von Tabellenspalten mit Vue Element Sortablejs

1. css: dragTable.css @Zeichensatz "UTF-8&qu...

So verwenden Sie Docker zum lokalen Verpacken und Bereitstellen von Images

Erste Verwendung von Docker zum lokalen Verpacken...

Detaillierte Erklärung zum Mounten von Remote-Dateisystemen über SSH unter Linux

Funktionen von SSHFS: Basierend auf FUSE (dem bes...

So stellen Sie mit Navicat eine Remoteverbindung zur Cloud-Server-Datenbank her

Es ist sehr praktisch, eine Verbindung zu einer R...