html - Chrome中多行文本的省略号

Question

-o-ellipsis-lastline谷歌浏览器有什么类似的吗？

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

Answer 1

由于text-overflow 的 W3 规范，不可能创建省略号纯 CSS 。

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

• http://www.codeitbetter.co.uk/widgets/ellipsis/
• http://jsfiddle.net/danesparza/TF6Rb/1/
• http://jsfiddle.net/MPkSF/
• http://jsfiddle.net/VpmbL/
• https://github.com/pvdspek/jquery.autoellipsis

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

Answer 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 是可选的。你可以根据你的需要改变...

希望能帮助到你 ：）...