How Can I Create Character Limits in CSS for Responsive Websites?

Creating Character Limits in CSS for Responsive Websites

When designing a responsive website, control over text length is crucial. One may encounter the need to restrict sentence length to a specific number of characters, ensuring that text doesn't overflow on large screens.

To achieve this, a "truncate" method can be employed using CSS's max-width and overflow-ellipsis properties. This technique involves setting a maximum width for text and adding an ellipsis (...) to indicate that the text has been truncated.

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

For instance:

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

This technique ensures that the text will wrap within the specified character limit on varying screen sizes without disrupting the layout.

The above is the detailed content of How Can I Create Character Limits in CSS for Responsive Websites?. For more information, please follow other related articles on the PHP Chinese website!