Chrome中多行文本的省略号答案

【问题标题】：ellipsis for multiline text in ChromeChrome中多行文本的省略号
【发布时间】：2012-06-09 19:23:04
【问题描述】：

谷歌浏览器有类似-o-ellipsis-lastline 的东西吗？

我正在构建一个 Chrome 扩展程序，并希望使用 CSS 省略多行文本。

【问题讨论】：

您对需要兼容的浏览器有什么要求吗？您愿意实施使用 Javascript 的解决方案吗？
我正在构建一个 Chrome 扩展，所以它只需要与 Chrome 兼容。我宁愿不使用 Javascript。

标签： html css ellipsis

【解决方案1】：

由于W3 spec for text-overflow，无法创建省略号纯CSS。

但如果您正在开发 Chrome 扩展程序，您已经在使用 JavaScript，那么这里有一些演示和插件可以解决您的问题：

我正在自己的项目中使用最后一个插件。

【讨论】：

【解决方案2】：

目前多行文本没有省略号...但是您可以使用简单的条件对多行进行省略号效果。这是一个例子......

假设你有一个这样的 html...

<div class="class_name"><%=message%></div>

然后您在运行时呈现您的文本...您的文本将被呈现并放置在 div 标记而不是消息模板中。所以你能做的就是……

<% if(message.length < 100) { %>
  <div class="class_name"><%=message%></div>
<% } else { %>
  <div class="class_name"><%=message.slice(0,80)%>...</div>
<% } %>

如果您的文字超过 100 个字符，它将显示省略号效果（在 80 个字符的末尾）

注意：值 100 和 80 是可选的。您可以根据需要进行更改...

希望对你有帮助:)...

【讨论】：