如何在字符串中包含空格的 <span> 中应用椭圆效果？

Posted 2023-05-07

【中文标题】如何在字符串中包含空格的 <span> 中应用椭圆效果？

【英文标题】：how to apply ellipse effect in <span> which contain space in string?

【发布时间】：2014-04-01 17:53:51

【问题描述】：

我想在一定宽度后显示省略号。我想用 css 来做这个。 & 仅在一个跨度标签中。（其他标签不应使用标签..等）。我怎么能做到这一点。

<span>Name: Patrick Jonson</span>

输出应该小于 1

Name: Patrick jon...

问题是出现空格时会断字。

请帮忙。

【问题讨论】：

你应该在问这样的问题之前搜索答案

"i already used below css"...这是什么“低于css”？

text-overflow: ellipsis not working的可能重复

【参考方案1】：

如果我理解正确的话……这很简单，可以完成-

Demo Fiddle

html

<span class='ellipsis'>Name: Patrick Jonson</span>

CSS

span.ellipsis
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:130px;
    display:inline-block;

【讨论】：

不幸的是，这不能仅用 CSS 完成。

这仅适用于内容是静态的。在这种情况下，确实繁荣！