Warum funktioniert mein CSS „text-overflow: ellipsis;' nicht?

CSS-Textüberlauf: Auslassungspunkte; Funktioniert nicht?

Die CSS-Eigenschaft „text-overflow: ellipsis;“ kürzt eine Zeichenfolge ab, wenn ihre Länge den verfügbaren Platz überschreitet, und ersetzt den abgeschnittenen Teil durch ein Auslassungszeichen (...). Allerdings funktioniert es möglicherweise nicht immer wie erwartet.

Bedingungen für die Funktionalität:

Für „text-overflow: ellipsis;“ Um ordnungsgemäß zu funktionieren, müssen die folgenden Bedingungen erfüllt sein:

• Pixelbeschränkte Breite: Die Breite des Elements muss in Pixel (px) angegeben werden. Die als Prozentsatz (%) ausgedrückte Breite aktiviert den Auslassungseffekt nicht.
• Eingeschränkter Überlauf und Leerraum: Das Element muss sowohl „overflow: versteckt“ als auch „white-space: nowrap“ haben " eingestellt.

Behebung des Problems:

Im bereitgestellten Code entsteht das Problem, weil die Breite des „a“-Elements nicht eingeschränkt ist. Obwohl eine Breite definiert ist, ist das Element standardmäßig auf „display: inline“ eingestellt, wodurch es über die angegebene Breite hinaus erweitert werden kann.

Um dieses Problem zu beheben, müssen Sie die Breite des Elements mithilfe einer der folgenden Methoden einschränken Methoden:

• Anzeige festlegen: Ändern Sie die Anzeigeeigenschaft in „display: inline-block“ oder „display: block“, um zu verhindern, dass das Element erweitert wird über die angegebene Breite hinaus.
• Containerelement einschränken: Geben Sie „display: block“ und eine feste Breite oder maximale Breite für eines der Containerelemente des „a“-Elements an.
• Element schweben lassen: Wenden Sie „float: left“ oder „float: right“ auf das Element „a“ an, um es einzuschränken Breite.

Die empfohlene Lösung besteht darin, die Anzeigeeigenschaft auf „display: inline-block“ zu setzen, da dies die möglichen Auswirkungen auf das aktuelle Layout minimiert.

Überarbeitet Snippet:

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein CSS „text-overflow: ellipsis;' nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!