为什么我的 CSS `text-overflow: ellipsis;` 不起作用？

CSS 文本溢出：省略号；不起作用？

CSS 属性“text-overflow: ellipsis;”当字符串长度超过可用空间时截断字符串，并用省略号 (...) 替换截断部分。但是，它可能并不总是按预期工作。

功能条件：

对于“文本溢出：省略号；”要正常运行，必须满足以下条件：

• 像素约束宽度： 元素的宽度必须以像素 (px) 为单位指定。以百分比 (%) 表示的宽度不会激活省略号效果。
• 约束溢出和空白：元素必须同时具有“overflow:hidden”和“white-space:nowrap” " 设置。

修复问题：

在提供的代码中，出现问题是因为“a”元素的宽度不受限制。尽管定义了宽度，但该元素默认设置为“display: inline”，这允许其扩展超出其指定的宽度。

要解决此问题，您必须使用以下其中一项来约束元素的宽度方法：

• 设置显示：将显示属性更改为“display: inline-block”或“display: block”以防止元素扩展超出其指定宽度。
• 约束容器元素： 为“a”的容器元素之一指定“display: block”和固定宽度或最大宽度元素。
• 浮动元素： 对元素应用“float: left”或“float: right”

推荐的解决方案是将显示属性设置为“display: inline-block”，这样可以最大限度地减少对当前布局的潜在影响。

修订后的片段：

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

以上是为什么我的 CSS `text-overflow: ellipsis;` 不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！