Long Content

This is a common contact list, and it looks perfect now.

Lao Wang

Lao Zhang

Lao Li

Old Zhao

However, since the contact name is entered by the user, we need to pay attention to how to protect the layout when the content is too long.

For example:

Lao Wang from the next door

Lao Zhang from East Street

Lao Li

Lao Zhao

In layouts like this, consistency is important. To achieve this, we can simply use text-overflow to truncate the name.

.username {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Lao Wang from next door

Lao Zhang from East Street

Lao Li

Lao Zhao

Example

In some cases, we may need to truncate text that is not important to the user or does not affect the user experience. In such cases, truncating the text is a good idea.

text-overflow: ellipsis

Adjust the container size to see the effect

HTML

<p>Adjust the container size to see the effect:</p>
<div class="wrapper">
  <div class="container">
    <h3 id="title">Writing defensive CSS is a good way to avoid style confusion</h3>
    <div class="more">more</div>
  </div>
</div>
<div class="actions">
  <input type="checkbox" id="toggle" />
  <label for="toggle">Enable text-overflow</label>
</div>

CSS

.wrapper {
  position: relative;
  width: 300px;
  max-width: 100%;
  display: flex;
  align-items: center;
  resize: horizontal;
  overflow: hidden;
  flex: 1;
  border-right: solid 2px var(--vp-c-border, #c2c2c4);
  padding-right: 3rem;
  padding-left: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  background: var(--vp-c-bg-alt, #f0f0f0);
}
.wrapper::after {
  content: 'Resize me';
  position: absolute;
  right: 0;
  top: 50%;
  writing-mode: tb-rl;
  transform: translateY(-50%);
  font-size: 13px;
  line-height: 1.2;
}

.container {
  width: 100%;
  display: flex;
  align-items: center;
}
.container h3 {
  padding-right: 20px;
  min-width: 0;
}
.container h3.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Javascript

const til = document.querySelector('#title')
document.querySelector('#toggle').addEventListener('change', (e) => {
  til.classList.toggle('ellipsis', e.target.checked)
})