使用CSS截断长字符串：可行吗？ [英] Truncating long strings with CSS: feasible yet?

问题描述

有没有用纯HTML和CSS截断文本的好方法，以便动态内容可以适合固定宽度和高度的布局？

我已经通过逻辑宽度（即，盲目猜测的字符数）截断服务器端，但由于'w'比'i'宽，这往往是次优的，并且还需要我重新猜测（并保持调整）每个固定宽度的字符数。理想情况下，截断会发生在浏览器中，它知道渲染文本的物理宽度。

我发现IE有一个 text-overflow：ellipsis 属性，这正是我想要的，但我需要这是跨浏览器。此属性似乎（有些？）标准，但Firefox不支持此属性。我找到了各种 解决方法基于 overflow：hidden ，但它们不显示省略号（我想让用户知道内容被截断），或者始终显示它（即使内容没有被截断）。

有没有人在固定布局中拟合动态文本的好方法，或者是通过逻辑宽度的服务器端截断与我要获得的

更新： org / 2011/09 / whats-new-for-web-developers-in-firefox-7 /rel =nofollow noreferrer> text-overflow：ellipsis 支持自Firefox 7（2011年9月27日发布）。好极了！我的原始答案是历史记录。

Justin Maxwell有跨浏览器CSS解决方案。它的确有一个缺点，不允许在Firefox中选择文本。请查看他在Matt Snider的博客上的帖子，了解完整详情

请注意，此技术还会阻止使用 innerHTML 属性更新JavaScript中节点的内容在Firefox。

  .ellipsis {
 white-space：nowrap; 
 overflow：hidden; 
 text-overflow：ellipsis; 
 -o-text-overflow：ellipsis; 
 -moz-binding：url（'assets / xml / ellipsis.xml＃ellipsis'）; 
} 
  

ellipsis.xml 文件内容

 <？xml version =1.0？& 
< bindings 
 xmlns =http://www.mozilla.org/xbl
 xmlns：xbl =http://www.mozilla.org/xbl
 xmlns：xul =http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
> 
< binding id =ellipsis> 
< content> 
< xul：window> 
< xul：description crop =endxbl：inherits =value = xbl：text>< children />< / xul：description> 
< / xul：window> 
< / content> 
< / binding> 
< / bindings> 
  

更新节点内容

要以Firefox中使用的方式更新节点的内容，请使用以下命令：

  var replaceEllipsis ，content）{
 node.innerHTML = content; 
 //使用你最喜欢的框架来检测gecko浏览器
 if（YAHOO.env.ua.gecko）{
 var pnode = node.parentNode，
 newNode = node.cloneNode （真正）; 
 
 pnode.replaceChild（newNode，node）; 
} 
}; 
  

查看 Matt Snider的帖子，了解如何工作。

Is there any good way of truncating text with plain HTML and CSS, so that dynamic content can fit in a fixed-width-and-height layout?

I've been truncating server-side by logical width (i.e. a blindly-guessed number of characters), but since a 'w' is wider than an 'i' this tends to be suboptimal, and also requires me to re-guess (and keep tweaking) the number of characters for every fixed width. Ideally the truncation would happen in the browser, which knows the physical width of the rendered text.

I've found that IE has a text-overflow: ellipsis property that does exactly what I want, but I need this to be cross-browser. This property seems to be (somewhat?) standard but isn't supported by Firefox. I've found various workarounds based on overflow: hidden, but they either don't display an ellipsis (I want the user to know the content was truncated), or display it all the time (even if the content wasn't truncated).

Does anyone have a good way of fitting dynamic text in a fixed layout, or is server-side truncation by logical width as good as I'm going to get for now?

解决方案

Update: text-overflow: ellipsis is now supported as of Firefox 7 (released September 27th 2011). Yay! My original answer follows as a historical record.

Justin Maxwell has cross browser CSS solution. It does come with the downside however of not allowing the text to be selected in Firefox. Check out his guest post on Matt Snider's blog for the full details on how this works.

Note this technique also prevents updating the content of the node in JavaScript using the innerHTML property in Firefox. See the end of this post for a workaround.

CSS

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

ellipsis.xml file contents

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

Updating node content

To update the content of a node in a way that works in Firefox use the following:

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

See Matt Snider's post for an explanation of how this works.

这篇关于使用CSS截断长字符串：可行吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！