标签: ellipsis

我在页面上有一组块元素.它们都具有CSS规则white-space,overflow,text-overflow set,以便修剪溢出的文本并使用省略号.

但是,并非所有元素都溢出.

无论如何,我可以使用javascript来检测哪些元素溢出？

谢谢.

补充:我正在使用的示例HTML结构.

<td><span>Normal text</span></td>
<td><span>Long text that will be trimmed text</span></td>

SPAN元素始终适合单元格,它们应用了省略号规则.我想检测省略号何时应用于SPAN的文本内容.

这出现在 Python的隐藏功能中,但我看不到可以解释该功能如何工作的好文档或示例.

我有一个弹性布局的网页,如果调整浏览器窗口大小,它会改变其宽度.

在这种布局中,标题(h2)将具有可变长度(实际上是我无法控制的博客标题的头条新闻).目前 - 如果它们比窗户宽 - 它们分成两行.

是否有一个优雅的,经过测试的(跨浏览器)解决方案 - 例如使用jQuery - 缩短了标题标签的innerHTML,如果文本太宽而无法放入当前屏幕的一行,则会添加"..."容器宽度？

请考虑以下示例:( 此处为现场演示)

HTML:

$(function() {
  console.log("width = " + $("td").width());
});

CSS:

td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

JS:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

输出为:width = 139,并且不显示省略号.

我在这里错过了什么？

有没有解决方案在div中的最后一行添加省略号,流体高度(20%)？

我-webkit-line-clamp在CSS中找到了这个函数,但在我的例子中,行号将取决于窗口大小.

p {
    width:100%;
    height:20%;
    background:red;
    position:absolute;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed dui felis. Vivamus vitae pharetra nisl, eget fringilla elit. Ut nec est sapien. Aliquam dignissim velit sed nunc imperdiet cursus. Proin arcu diam, tempus ac vehicula a, dictum quis nibh. Maecenas vitae quam ac mi venenatis vulputate. Suspendisse fermentum suscipit eros, ac ultricies leo sagittis quis. Nunc sollicitudin lorem eget eros eleifend facilisis. Quisque bibendum sem at bibendum suscipit. …

该text-overflow:ellipsis;CSS属性必须是的,微软已经适合网页所做的几件事情之一.

所有其他浏览器现在都支持它...除了Firefox.

自2005年以来,Firefox开发人员一直在争论它,但尽管对它有明显的需求,它们似乎无法真正实现它(即使是实验性-moz-实现也足够了).

几年前,有人设法破解Firefox 3以支持省略号.黑客使用该-moz-binding功能使用XUL实现它.现在有很多网站正在使用这种黑客攻击.

坏消息？Firefox 4正在删除该-moz-binding功能,这意味着此黑客将无法再使用.

因此,一旦Firefox 4发布(本月晚些时候,我听到),我们将回到让它无法支持此功能的问题.

所以我的问题是:还有其他方法吗？(我试图避免回到Javascript解决方案,如果可能的话)

[编辑]
很多投票,所以我显然不是唯一想知道的人,但到目前为止我有一个答案基本上都是'使用javascript'.我仍然希望找到一个根本不需要JS的解决方案,或者最糟糕的是只将它用作CSS功能不起作用的后备.因此,我将在这个问题上发布一个赏金,关于有人在某个地方找到答案的机会.

[编辑]
更新:Firefox已进入快速开发模式,但尽管现在正在发布FF5,但仍不支持此功能.现在大多数用户已从FF3.6升级,黑客不再是解决方案.好消息我被告知它可能会被添加到Firefox 6中,而新版本的发布时间表应该会在几个月内完成.如果是这样,那么我想我可以等一下,但遗憾的是他们不能早点排序.

[最终编辑]
我看到省略号功能最终被添加到Firefox的"Aurora频道"(即开发版).这意味着它现在应该作为Firefox 7的一部分发布,它将于2011年底发布.真是令人宽慰.

可在此处获取发行说明:https://developer.mozilla.org/en-US/Firefox/Releases/7

我的应用程序中有一个很长的文本,我需要截断它并在末尾添加三个点.

我怎么能在React Native Text元素中做到这一点？

谢谢

我在哪里可以找到有关...函数用法的文档？例子很有用.

我有一个TextView已android:ellipsize="end"设置的多行.但是,我想知道,如果我放在那里的字符串实际上太长了(这样我可以确保完整的字符串显示在页面的其他地方).

我可以使用TextView.length()并找到字符串的大致长度适合的内容,但由于它是多行,TextView句柄何时换行,所以这并不总是有效.

有任何想法吗？

我相信我们所有人都在Facebook状态(或其他地方)看过省略号,然后点击"显示更多"并且只有另外两个字符左右.我猜这是因为懒惰的编程,因为肯定有一种理想的方法.

我将细长的字符[iIl1]称为"半字符",但是当它们几乎不隐藏任何字符时,这并不会使省略号看起来很傻.

有理想的方法吗？这是我的:

/**
 * Return a string with a maximum length of <code>length</code> characters.
 * If there are more than <code>length</code> characters, then string ends with an ellipsis ("...").
 *
 * @param text
 * @param length
 * @return
 */
public static String ellipsis(final String text, int length)
{
    // The letters [iIl1] are slim enough to only count as half a character.
    length += Math.ceil(text.replaceAll("[^iIl]", "").length() / 2.0d);

    if (text.length() > length)
    {
        return text.substring(0, length - …