为什么我的'text-overflow: ellipsis”不起作用？

text-overflow: ellipsis Not Functioning

当浏览器窗口变窄时，尝试使用省略号缩小范围，使用了以下代码：

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

但是，这段代码没有产生预期的效果。要进行故障排除，请务必确保存在以下 CSS 属性：

• 溢出： 此属性控制内容应如何流出其容器。
• Width（或 max-width）： 该属性决定跨度的最大宽度。
• 显示： 该属性指定跨度应如何显示，通常设置为内联、块或内联块。
• White-space: 此属性指示如何在跨度内处理空白。

这里是一个示例包含以下属性的更正代码：

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

通过合并这些 CSS 属性，当窗口变窄时，跨度现在应该用省略号缩小。

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