问检测CSS文本溢出: Firefox中的省略号
EN

Stack Overflow用户

提问于 2013-02-01 07:28:45

回答 2查看 3.8K关注 0票数 10

我正在尝试(通过javascript)检测文本溢出何时生效。经过大量的研究，我有了一个可行的解决方案，除了在任何版本的Firefox中：

http://jsfiddle.net/tonydew/mjnvk/

如果您调整浏览器以应用省略号，Chrome、Safari甚至IE8+都会警告省略号处于活动状态。在Firefox (我尝试过的每个版本，包括17和18)中就没那么多了。Firefox总是会告诉你省略号是不活动的。

console.log()输出显示了原因：

Firefox (OS X):
116/115 - false
347/346 - false

Chrome (OS X):
116/115 - false
347/851 - true

在火狐中，scrollWidth永远不会大于offsetWidth。

我能找到的最接近解决方案的东西是"Why are IE and Firefox returning different overflow dimensions for a div?“，但我已经在使用建议的解决方案了。

有没有人可以解释一下如何在Firefox中实现这个功能？

编辑:除了下面的@Cezary答案之外，我发现了一个不需要更改标记的方法。然而，它做了更多的工作，因为它临时克隆了每个元素来进行测量：

$(function() {
    $('.overflow').each(function(i, el) {
        var element = $(this)
                      .clone()
                      .css({display: 'inline', width: 'auto', visibility: 'hidden'})
                      .appendTo('body');

        if( element.width() > $(this).width() ) {
            $(this).tooltip({
                title: $(this).text(),
                delay: { show: 250, hide: 100 },
            });
        }
        element.remove();
    });
});

http://jsfiddle.net/tonydew/gCnXh/

有人对这种方式的效率有什么看法吗？如果我有一个包含许多潜在溢出元素的页面，这会有负面影响吗？如果可以的话，我希望避免修改现有的标记，但不会以每次页面加载时过多的JS处理为代价。

javascript

css

firefox

ellipsis

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-02-01 09:22:04

您需要在每个td中添加div才能使其在firefox中工作，

<td class="first"><div>Here is some text</div></td>
<td class="second">
     <div>Here is some more text. A lot more text than
     the first one. In fact there is so much text you'd think it was a 
     waste of time to type all ofit.
     </div>
</td>

CSS

td div {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow:hidden;
   width:100%;
}

Jsfiddle

http://jsfiddle.net/mjnvk/7/

票数 6

Stack Overflow用户

发布于 2013-02-01 20:42:57

我实际上写了一个jQuery插件来做这件事。如果被截断，它只是将目标元素的title设置为整个文本，但您可以根据实际需要对其进行调整：

/**
 * @author ach
 *
 * Sets the CSS white-space, overflow, and text-overflow properties such that text in the selected block element will
 * be truncated and appended with an ellipsis (...) if overflowing.  If the text is truncated in such a way, the
 * selected element's 'title' will be set to its full text contents and the cursor will be set to 'default'.
 * For this plugin to work properly, it should be used on block elements (p, div, etc.).  If used on a th or td element,
 * the plugin will wrap the contents in a div -- in this case, the table's 'table-layout' CSS property should be set to 'fixed'.
 *
 * The default CSS property values set by this plugin are:
 *     white-space: nowrap;
 *     overflow: hidden;
 *     text-overflow: ellipsis
 *
 * @param cssMap A map of css properties that will be applied to the selected element.  The default white-space,
 * overflow, and text-overflow values set by this plugin can be overridden in this map.
 *
 * @return The selected elements, for chaining
 */

$.fn.truncateText = function(cssMap) {
    var css = $.extend({}, $.fn.truncateText.defaults, cssMap);

    return this.each(function() {
        var $this = $(this);
        //To detect overflow across all browsers, create an auto-width invisible element and compare its width to the actual element's
        var element = $this.clone().css({display: 'inline', width: 'auto', visibility: 'hidden'}).appendTo('body');
        if (element.width() > $this.width()) {
            //If a th or td was selected, wrap the content in a div and operate on that
            if ($this.is("th, td")) {
                $this = $this.wrapInner('<div></div>').find(":first");
            }
            $this.css(css);
            $this.attr("title", $.trim($this.text()));
            $this.css({"cursor": "default"});
        }
        element.remove();
    });
};
$.fn.truncateText.defaults = {
    "white-space"   : "nowrap",
    "overflow"      : "hidden",
    "text-overflow" : "ellipsis"
};