文本溢出省略號(hào)可通過(guò)CSS實(shí)現(xiàn)，單行使用white-space: nowrap、overflow: hidden、text-overflow: ellipsis；多行則用display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp控制行數(shù)並配合overflow: hidden。 1. 單行需設(shè)定寬度，否則不生效；2. 多行需指定行數(shù)且依賴WebKit瀏覽器支持；3. 常見(jiàn)問(wèn)題包括容器未限制尺寸、文字未溢出、佈局干擾或word-break影響計(jì)算；4. 注意邊緣情況如短文本誤顯示、標(biāo)點(diǎn)截?cái)嗉耙苿?dòng)端動(dòng)態(tài)字體影響。

Text overflow ellipsis is a neat way to handle text that doesn't fit within its container. Instead of letting the text run off or wrap awkwardly, you can show an ellipsis ( ... ) to indicate there's more content. It's especially useful in UI design for things like headlines, buttons, or navigation menus.

Basic Setup: Single Line Ellipsis

To apply a simple ellipsis on a single line, you'll need a few CSS properties working together:

• white-space: nowrap – prevents the text from wrapping
• overflow: hidden – hides any text that goes beyond the container
• text-overflow: ellipsis – adds the ... where the text is cut off

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

This works well when your element has a defined width — either fixed (like 200px ) or relative (like 100% ). Without a set width, the container might expand to fit all the text, and no ellipsis will appear.

Multi-line Ellipsis (The Practical Way)

CSS doesn't have a built-in property for multi-line ellipsis like it does for single lines. But you can achieve it using -webkit-line-clamp , which limits the number of lines displayed before cutting off with an ellipsis.

Here's how to do it:

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

This method uses flexbox-based logic inside WebKit browsers (like Chrome and Safari), so it's widely supported these days. Just keep in mind:

• You must include both -webkit-box-orient: vertical and display: -webkit-box
• This only works when the parent has a defined height or when line-clamp is used

You can adjust the number in -webkit-line-clamp to control how many lines are shown before the ellipsis kicks in.

When It Might Not Work

Sometimes the ellipsis won't show up even if you've written the correct CSS. Here are common reasons why:

• ? The element isn't constrained in width or height
• ? The text isn't overflowing (try reducing space or increasing font size temporarily)
• ? Other layout styles like flex or grid interfere with internal rendering
• ? Using word-break: break-all might affect how overflow is calculated

If you're having trouble, try adding a background color or border to the container to better see its boundaries.

A Few Edge Cases to Watch For

There are some small details that can trip people up:

• Ellipsis may not appear correctly with very short text — sometimes it shows without needing to
• In some cases, punctuation at the end of the line gets clipped before the actual word
• On mobile devices, zooming or dynamic text sizing can affect how overflow behaves

One trick is to add a bit of padding or use box-sizing: border-box so the overflow calculation includes borders and padding.

基本上就這些。

以上是用CSS實(shí)施文本溢出省略的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！