css显示省略号怎么解决

在 css 中，省略号不显示或显示不正确的原因包括：文本不足、容器过大、css 设置不当或浏览器差异。解决方案包括：缩短文本、扩大容器、检查 css 设置、使用 javascript、使用布局技术或第三方库。

CSS 中如何解决省略号问题

在 CSS 中，当文本溢出容器时，可以显示省略号（...）来表明有被截断的文本。然而，在某些情况下，省略号可能不显示或显示不正确。

原因

导致省略号不显示或显示不正确的原因有多种：

立即学习“前端免费学习笔记（深入）”；

• 文本长度不足：如果文本长度短于容器宽度，则不会显示省略号。
• 容器太大：如果容器足够大以容纳所有文本，则同样不会显示省略号。
• CSS 设置不正确：省略号的显示受 CSS 属性（例如 "text-overflow" 和 "overflow") 的控制，如果设置不正确，则可能导致省略号不显示。
• 浏览器差异：不同浏览器对省略号的渲染方式可能不同。

解决方案

要解决省略号问题，可以尝试以下解决方案：

1. 缩短文本：如果文本长度过长，可以将其缩短以使其适合容器。

2. 扩大容器：如果容器太小，可以扩大其宽度以容纳所有文本。

3. 检查 CSS 设置：确保 "text-overflow" 和 "overflow" 属性正确设置为 "ellipsis"，如下所示：

.container {
  text-overflow: ellipsis;
  overflow: hidden;
}

QQ2EAFB3

分享到：