如何在 CSS 中為響應式網站建立字元限制？

在 CSS 中為響應式網站建立字元限制

設計響應式網站時，對文字長度的控制至關重要。人們可能會遇到需要將句子長度限制為特定字元數，以確保文字不會在大螢幕上溢出。

為了實現這一點，可以使用 CSS 的 max-width 來使用「截斷」方法和溢位省略屬性。此技術涉及設定文字的最大寬度並添加省略號 (...) 以指示文字已被截斷。

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

例如：

.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>

此技術可確保文字在不同的螢幕尺寸上在指定的字元限制內換行，而不會破壞佈局。

以上是如何在 CSS 中為響應式網站建立字元限制？的詳細內容。更多資訊請關注PHP中文網其他相關文章！