Wie kann ich in CSS Zeichenbeschränkungen für responsive Websites erstellen?

Erstellen von Zeichenbeschränkungen in CSS für responsive Websites

Beim Entwerfen einer responsiven Website ist die Kontrolle über die Textlänge von entscheidender Bedeutung. Möglicherweise muss die Satzlänge auf eine bestimmte Anzahl von Zeichen beschränkt werden, um sicherzustellen, dass der Text auf großen Bildschirmen nicht überläuft.

Um dies zu erreichen, kann eine „Truncate“-Methode unter Verwendung der maximalen Breite von CSS verwendet werden und Überlauf-Ellipsen-Eigenschaften. Bei dieser Technik wird eine maximale Breite für Text festgelegt und ein Auslassungszeichen (...) hinzugefügt, um anzuzeigen, dass der Text abgeschnitten wurde.

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 75ch; /* Adjust to desired character limit */
}

Zum Beispiel:

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 400px;
  margin: 50px auto;
}

.demo-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.demo-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
}

<div class="wrapper">
  <p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

<div class="wrapper">
  <p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

Diese Technik stellt sicher, dass der Text bei unterschiedlichen Bildschirmgrößen innerhalb der angegebenen Zeichenbeschränkung umgebrochen wird, ohne das Layout zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS Zeichenbeschränkungen für responsive Websites erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!