Ellipses are displayed when text exceeds one or more lines

1. A single line of text exceeds the display of ellipsis

The most common way to write it (✅ supported by all modern browsers):

css

.single-line {
  overflow: hidden;              /* 超出隐藏 */
  text-overflow: ellipsis;       /* 超出部分显示省略号 */
  white-space: nowrap;           /* 不换行 */
  width: 200px;                  /* 必须限定宽度 */
}

📘 Explanation of key points:

Properties	Function
`overflow: hidden`	Hide content beyond the container
`text-overflow: ellipsis`	Display the excess part `...`
`white-space: nowrap`	Force text to be displayed on one line without wrapping
`width`	Must be set, otherwise it will be invalid (can be fixed width or max-width)

✅ Effect:

:::demo [vanilla]

html

<html>
   <div class="single-line">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div>
</html>
<style>
    .single-line{
        border: 1px solid #999;
        overflow: hidden;              /* 超出隐藏 */
        text-overflow: ellipsis;       /* 超出部分显示省略号 */
        white-space: nowrap;           /* 不换行 */
        width: 200px;                  /* 必须限定宽度 */
    }
</style>

:::

2. Multi-line text exceeds the display ellipses

For multi-line situations, use WebKit’s private properties👇

css

.multi-line {
  display: -webkit-box;              /* 作为弹性伸缩盒子模型显示 */
  -webkit-box-orient: vertical;      /* 垂直排列子元素 */
  -webkit-line-clamp: 2;             /* 限制显示2行 */
  overflow: hidden;                  /* 超出隐藏 */
  text-overflow: ellipsis;           /* 超出部分显示... */
}

📘 Key Points:

Properties	Description
`-webkit-line-clamp: n`	Truncate after displaying n lines
`display: -webkit-box` + `-webkit-box-orient: vertical`	Implement multi-line layout
`overflow: hidden`	Enable truncation

✅ Effect:

:::demo [vanilla]

html

<html>
   <div class="multi-line">演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字演示文字</div>
</html>
<style>
    .multi-line{
        border: 1px solid #999;
        width: 200px;

        display: -webkit-box;              /* 作为弹性伸缩盒子模型显示 */
        -webkit-box-orient: vertical;      /* 垂直排列子元素 */
        -webkit-line-clamp: 2;             /* 限制显示2行 */
        overflow: hidden;                  /* 超出隐藏 */
        text-overflow: ellipsis;           /* 超出部分显示... */
      }
</style>

:::

3. Optional enhanced version (with gradient mask)

To make ellipses more natural (especially in cards, lists) 👇

css

.multi-fade {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.multi-fade::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30%;
  height: 1.2em;
  background: linear-gradient(to right, transparent, #fff);
}

✅ Effect:

There will be a gradient disappearing effect at the end of the text, making it smoother and more beautiful.

4. Vue component encapsulation (Composition API version)

You can copy and use it directly👇

vue

<template>
  <div
    :class="['ellipsis', { multi }]"
    :style="{ '-webkit-line-clamp': lines }"
  >
    <slot />
  </div>
</template>

<script setup>
defineProps({
  multi: { type: Boolean, default: false }, // 是否多行
  lines: { type: Number, default: 2 },      // 多行时显示行数
})
</script>

<style scoped>
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis.multi {
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>

📦 How to use:

vue

<Ellipsis>这是单行文字省略效果</Ellipsis>

<Ellipsis multi :lines="3">
  这是多行省略效果，可以自动控制显示行数。
</Ellipsis>

5. Compatibility Summary

Properties	Support
Single line omission (`text-overflow: ellipsis`)	✅ All modern browsers
Multi-line omission (`-webkit-line-clamp`)	✅ Chrome, Safari, Edge, Firefox 68+
Gradient masking scheme	✅ All modern browsers
IE browser	⚠️ Only supports single line omission

6. Common interview answer templates

There are two types of ellipses when the text exceeds the display: Single lines can use overflow: hidden, text-overflow: ellipsis and white-space: nowrap; If there are multiple lines, use -webkit-line-clamp to limit the number of displayed lines, and combine it with display: -webkit-box; If you need to be compatible with older browsers or IE, you can use JS to dynamically intercept the string. In Vue projects, I usually encapsulate a <Ellipsis /> component to achieve flexible reuse.

7. JS determines whether the ellipsis is displayed

Sometimes we need to know whether the overflow has occurred and the ellipses are displayed. We can use the knowledge of clientHeight and scrollHeight:

let cHeight = noWrapDiv.clientHeight;
let sHeight = noWrapDiv.scrollHeight;
if (sHeight > cHeight) {
      console.log("已经溢出显示省略号");
} else {
      console.log("没有溢出");
}

This can be used to determine whether the expand and shrink buttons are displayed overflow.

scrollHeight: The height of the element's content, including content not visible in view due to overflow.Excludes scrollbars, borders, and margins.

clientHeight: The height of the visual area of the element content, including padding, but excluding horizontal scroll bars, borders, and margins.

offsetHeight: The pixel height of the element. The height includes the vertical padding and border of the element, and is an integer.