使用省略号截断字符串 | CSS-Tricks

Khalid

# 2011年2月20日

我喜欢这个，但是 Firefox 不支持它。

Chris Coyier

评论永久链接# 2011年2月20日

不过回退效果还不错（在我看来）。它只是截断了。
Khalid

评论永久链接# 2011年2月21日

是的，你说得对，但我不喜欢它的外观。我在一个网站上使用了额外的 HTML 元素来使其在 Firefox 中看起来更好。
为 HTML 元素设置 `position` 属性为 `absolute`，使用 `right: 0` 定位，并为其设置 20px 的宽度。然后使用 `background-image: -moz-linear-gradient (…)` 创建从透明（我使用不透明度为 0 的 rgba）到纯色（放置文本的元素的背景颜色）的渐变。如果需要，可以调整宽度并为 `z-index` 属性添加值。

或者您可以使用 PNG 图片，但这将在所有浏览器中可见。

第一个解决方案确实是一个 CSS 技巧，不是吗？;)
Jean

评论永久链接# 2014年1月21日

用户可能会受益于知道某个数字或文本正在被截断。我在这里找到了针对 Firefox 的解决方案这里。

感谢 Chris 一路提供的帮助！
Chris

评论永久链接# 2014年12月7日

值得庆幸的是，Firefox 7 中添加了对省略号的支持。现在 Firefox 已经到了 30+ 版本，您可以肯定它可以在大多数 Firefox 用户的机器上正常工作 :)
Siraj

评论永久链接# 2015年12月23日

请为所有浏览器应用 js 以获得支持。

function shorten(text, maxLength) {
var ret = text;
if (ret.length > maxLength) {
ret = ret.substr(0,maxLength-3) + “…”;
}
return ret;
}

Maikel

# 2011年2月20日

此网站向您展示了如何在 Firefox 中使其正常工作。

http://mattsnider.com/css/css-string-truncation-with-ellipsis/

它在 IE6 中有效……但在 Firefox 中无效……太糟糕了！

stryju

评论永久链接# 2011年2月24日

嗯，您提供的链接也使其在 Firefox 中有效 :-)

Ahrengot

# 2011年3月19日

Vimeo 的一位开发人员也创建了一个 JavaScript 文件来实现此功能。我相信它在所有浏览器中都有效，并且在文本块和单行中都有效。

如果您有很多小的文本块，它可能会稍微增加 CPU 负载，但在我使用它的几次中，它运行良好。

http://reusablebits.com/post/2642059628/introducing-clamp-js

mystrdat

评论永久链接# 2012年9月18日

稍微增加一点负载？它是一个资源怪兽。
Michael

评论永久链接# 2013年1月18日

241 行代码来截断一个简单的字符串？我相信它很棒，并且在超出我自身情况之外的许多其他用途上都有效……但仍然……241 行。我的天！

Thomas

# 2012年2月7日

是否可以使 CSS 省略号在多行上工作？或者这需要 JavaScript？

Thierry Koblentz

评论永久链接# 2012年4月14日

-webkit-line-clamp（一个不受支持的 WebKit 属性）允许您执行此操作。

http://dropshado.ws/post/1015351370/webkit-line-clamp

Opera 有一个非常酷的功能。

text-overflow: -o-ellipsis-lastline;
Marcel

评论永久链接# 2015年8月20日

我已经实现了它，并且效果非常好。

http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
Rohit More

评论永久链接# 2017年4月19日

最新的 Firefox 是否有可用的 `line-clamp` 属性？

Thamarai

# 2012年2月24日

您好，
我有一个语句，它应该显示省略号，但不应该影响该语句后面的上标。
例如，我的语句应该如下所示：“总价值……^1”
请帮助我解决这个问题。

Rebecca

评论永久链接# 2016年6月9日

仍然想知道是否有人找到了解决方法……至少我没有找到，没有任何 HTML 标记操作。

BRNater

# 2012年3月27日

这是 CSS3 还是 CSS 2.1 的东西？只是想知道我落后了多少 :) PS。Chris，您做得很好。感谢您所做的一切！

mystrdat

评论永久链接# 2012年10月11日

CSS3

Gerald Ford

# 2012年4月10日

这很好，但看起来 Firefox 仍然不支持。我的 Dreamweaver CS5.5 甚至没有下拉菜单。

Erik

# 2012年5月31日

Firefox 在 Gecko 7.0+ 中支持此功能。
https://mdn.org.cn/en/CSS/text-overflow :)

Ben

# 2012年9月10日

嘿 - 有人知道如何用完整的单词来做到这一点吗？
我看到 `text-overflow:ellipsis-word` 被使用了几次，但一直无法找到足够的文档来确定它是否跨浏览器/被接受使用。

假设 JS 实现来截断完整的单词也可以。

谢谢。

luky

# 2012年10月16日

@Thierry Koblentz：非常感谢！我一直在寻找仅使用 CSS 的多行省略。

Ash Skutches

# 2012年11月1日

效果很好，谢谢！顺便说一句，评论框不错！

Miko

# 2012年11月28日

似乎 Firefox 现在支持此功能……实现此功能的另一种方法也可以是（除了原始 css 之外）
.truncate {
width: 230px;
}
.truncate:after{
content:”…”;
}

Irfan

评论永久链接# 2013年8月20日

绝妙的解决方案 - 感谢您的贡献，同事，并感谢 Chris 发起这个讨论。
Koen

评论永久链接# 2015年1月26日

这种方法的优点在于它也适用于多行块，当然也受 Firefox 7 之前的版本支持。我确实看到了一个问题，如果您的文本实际上确实适合，那么您会得到一个无用的省略号。如果您知道您的文本会被截断，您不妨使用 PHP 来缩短它并添加一个 […] 链接。
我想最终这一切都取决于上下文。

Lore

# 2013年1月10日

我遇到过一个无法使用此功能的案例（WordPress 中的 Masonry 显示文章摘录）。这段 CSS3 对我有用

word-wrap: break-word;

Mihail Yakimenko

# 2013年3月22日

这是一个非常好的解决方案.. 但是，仅适用于具有固定宽度的元素。但是如果我有一个宽度为 auto 的表格单元格，并且需要隐藏文本…我就失败了 :(

看看..

Chris

# 2013年4月17日

我一直在 IE9 中使用它，如果你有两个 span 并排，第一个 span 有省略号，那么所有后续的 span 的位置都会稍微偏移。如果有人遇到过这种情况和/或很好地处理了它，请告诉我。

查看它

Parag

永久链接到评论# 2013年10月16日

嗨，cris，在你的 css 中添加 float:left。
.ellipsis {
display: inline-block;
max-width: 100px;
ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-top: 0px;
padding-top: 0px;
float:left
}

Apopii Dumitru

# 2013年6月27日

你也可以用多行来做这个，例如：sass 模式

.truncatedText {
   font-size: 0.875em;
   line-height: 1.2em;
   height: 2.4em; // 2 lines * line-height
   &:after {
      content: " ...";
   }
}

Apopii Dumitru

永久链接到评论# 2013年6月27日

我忘了 overflow: hidden;
kartofelek007

永久链接到评论# 2013年9月20日

这不起作用。
选择器 :after 在隐藏文本之后放置 '...'（这也隐藏了）
sina

永久链接到评论# 2014年5月13日

是的，这里不起作用…

Prachi

# 2013年7月18日

我在网上读到，理想情况下，输入文本字段不应该支持此属性（“text-overflow:ellipsis”），但如果它支持它会更好。我尝试过，发现 FF 和 Chrome 支持它，但 IE 和 Safari 不支持。:(。

Michael Johnston

# 2013年7月21日

Chris，你总是有我的解决方案。如果没有你，我的网络应用将无法达到今天的水平。非常感谢你所有的精彩帖子！

Mahmud

# 2013年9月9日

嗨，Chris，我是 css-tricks 的忠实粉丝。特别是视频部分。这是一个新的术语（text-overflow）对我来说。现在，我明白了。

谢谢

Ross

# 2013年11月12日

这对于截断单行文本非常有用。

对于多行文本，我使用 Dotdotdot。

Jasminum

# 2014年4月27日

我需要对逗号分隔的值进行省略号处理。如果我使用文章中提供的“webkit-line-clamp”和“.truncate”类，省略号会出现，但所有值都出现在不同的行而不是一行中。如何确保值使用 css 只能出现在一行中？

simranjit

# 2014年7月8日

我想在 2 行后添加省略号，这可能吗？

Amr Ahmed

永久链接到评论# 2018年10月18日

2018 年使用原生 css 找到如何做到这一点的运气如何？:D
DP

永久链接到评论# 2018年10月18日

Line-clamp + ellipsis 类

Ying Zhang

# 2014年10月4日

仍在寻找仅使用 css 截断多行的办法... 到目前为止还没有找到...

Ying Zhang

永久链接到评论# 2014年10月4日

嗯，这可能是一个赢家 http://codepen.io/martinwolf/pen/qlFdp
Ying Zhang

永久链接到评论# 2014年10月4日

为它做了一个 sass 混合 http://codepen.io/dodozhang21/pen/mHvrn
Rodney

永久链接到评论# 2016年7月14日

很棒的例子，但它们在 IE 或 FF 中不起作用。有没有人在所有浏览器中都能工作的多行示例？
Keith

永久链接到评论# 2016年11月12日

Ying，这效果惊人，这正是我想要的！谢谢！
Riem

永久链接到评论# 2016年12月29日

谢谢：))

David Strutz

# 2015年3月4日

请添加一行！ display:inline-block;

.truncate {
  display:inline-block;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Fitz

永久链接到评论# 2015年4月13日

根据你的情况，display:block 也适用。

David

# 2015年9月13日

有没有办法查看一个元素，如果该元素确实截断了其中的字符串，则返回一些内容？因为当它不需要被截断时，它仍然有 CSS，但当它确实被截断时，它无法真正确定在...中查找什么？想法？

Prome

# 2015年9月30日

在 JQuery 对话框标题中完美运行。

Brian Lee

# 2016年5月2日

我不得不稍微修改一下才能在我的场景中工作。我必须使用display: inline-block来限制元素的宽度，并使用vertical-align: middle来纠正display: inline-block引起的一些垂直对齐问题。对于任何可能发现它有用的人

.truncate-link {
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Hasan

# 2016年9月15日

是否有任何 css 方法可以在文本中间实现省略号，例如“HiIamHasan…thereanySolution”。

Prumps Manjula

# 2017年2月27日

任何 CSS 解决方案的问题在于你必须将 CSS 注入到你的 Web 应用中，我的动态网站没有任何 CSS，我也不愿意将 HTML 也注入其中。我发现通过获取一个字符串并将其除以 2 可以使字符串变短，因此应该适合任何人的目的。

unthinkingly

# 2017年4月5日

你可以在没有显式宽度的情况下进行省略号截断——但你需要在包含元素上添加一个额外的overflow: hidden。

参见：http://codepen.io/unthinkingly/pen/XMwJLG

clevergadget

永久链接到评论# 2017年4月12日

感谢你的更新，unthinkingly，你真的帮了我的忙。我很高兴我在本周才开始寻找解决方案。

Stew West

# 2017年5月3日

此选项似乎运行得相当好，即使在换行文本上，但尚未完全兼容。

Marek

# 2017年7月21日

请记住，如果容器具有 display: flex，省略号将不会显示。

unthinkingly

永久链接到评论# 2017年8月2日

谢谢 Marek，说得好，被截断的元素不能是display: flex。（应该是display: block。）

此外，如果被截断的元素嵌套在 flex 项目内，则 flex 项目需要具有overflow: hidden。

我更新了一个演示，其中包含更多关于如何将此与 flex 一起使用的详细信息。这些问题并不直观，但一旦你让它工作，省略号在 flex 中确实非常有用！

http://codepen.io/unthinkingly/pen/XMwJLG

Rick Leijten

# 2018年6月11日

当元素具有 display: inline-block 时，省略号在 Firefox 中也不会显示。

Danny Andrews

# 2018年7月5日

在子元素上添加width: 100%怎么样？这似乎也有效。对于未来的代码阅读者来说，可能不那么神秘。

Asha

# 2018年11月14日

是否可以在文本和省略号之间添加空格？

Geoff Graham

永久链接到评论# 2018年11月14日

据我所知，没有，但这是一个非常有趣的想法。line-clamp 属性目前处于工作草案阶段，虽然它也不会这样做，但可能值得将你的用例添加到规范讨论中。

Ayla

# 2021年8月31日

是否可以仅在空格处使用省略号？也就是说，不打断单词本身，而是找到最接近最大宽度的空格？当然，我不能添加任何换行符，否则省略号将认为不需要“…”。

有什么想法吗？

当前代码

.textDiv {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

评论

发表评论 取消回复

发表评论取消回复