当前位置: 首页 > 面试题库 >

文字溢出:省略号不起作用

章远航
2023-03-14
问题内容

这是我尝试过的:

body {
    overflow: hidden;
}

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

本质上,当窗口变小时,我希望跨度以省略号缩小。我做错什么了?


问题答案:

您需要具有CSS overflowwidth(或max-widthdisplaywhite-space

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


 类似资料:
  • 问题内容: 我不知道为什么这个简单的CSS无法正常工作… 应该切断第四次“测试” 问题答案: 仅在满足以下条件时起作用: 元素的宽度必须限制为(像素)。宽度(百分比)无效。 元素必须具有并设置。 您在这里遇到问题的原因是因为您的元素的不受限制。您确实有一个设置,但是因为该元素设置为(即默认值),所以它忽略了它,并且也没有其他任何约束其宽度的方法。 您可以通过执行以下任一操作来解决此问题: 将元素设

  • 我不知道为什么这个简单的CSS不起作用... null null 应该在第4次“测试”前后切断

  • 问题内容: 我知道您可以使用CSS规则组合来在溢出时(不超出父级的范围)使文本以省略号(…)结尾。 是否有可能(随意说,不)达到相同的效果,但让文本换行超过一行? 如您所见,当文本的宽度大于div的宽度时,文本以省略号结尾。但是,仍然有足够的空间用于文本换行并继续。这会被中断,以使省略号起作用。 有任何想法吗? PS:没有JS解决方案,如果可能的话,使用纯CSS。 问题答案: 我不确定您是否看过

  • 问题内容: 我有的容器。我希望中间的孩子能占据整个空间,所以我定了它。到目前为止,一切都很好。 下一个级别是中间的孩子有2个孩子,因此我也希望将其设置为flex(如果您迷路了,请跳到摘要),第一个孩子设置省略号样式。现在,省略号停止工作。 如果您单击该按钮,您会看到所有带有短文本的内容都很好; 有任何想法吗? 问题答案: 添加到。 其实,MOSH Feu的建议在他的回答,也应该工作,确实,跨浏览器

  • 问题内容: 我有一条路径列表(由于缺少更好的词,也许面包屑痕迹可以更好地描述它们)。有些值太长而无法在其父项中显示,因此我正在使用。问题在于重要信息在右侧,因此我希望省略号出现在左侧。像这样的ASCII艺术: 请注意,第一行足够短,因此仍保持左对齐,而其他两行又太长,因此省略号出现在左侧。 我更喜欢仅CSS的解决方案,但是如果无法避免,JS很好。如果该解决方案仅适用于Firefox和Chrome,

  • 问题内容: 我在页面上有一个块元素集合。它们都设置了CSS规则的空白,溢出,文本溢出,以便修剪掉溢出的文本并使用省略号。 但是,并非所有元素都会溢出。 无论如何,我可以使用JavaScript来检测哪些元素正在溢出吗? 谢谢。 补充:我正在使用的示例HTML结构。 SPAN元素始终适合单元格,它们应用了省略号规则。我想检测何时将省略号应用于SPAN的文本内容。 问题答案: 很久以前,我需要这样做,