Truncar seqüências longas com CSS: viável ainda?

210

Existe alguma maneira de truncar texto com HTML e CSS simples, para que o conteúdo dinâmico possa caber em um layout de largura e altura fixas?

Estive truncando o lado do servidor pela largura lógica (ou seja, um número de caracteres adivinhados às cegas), mas como um 'w' é maior que um 'i', isso tende a ser subótimo e também exige que eu repense ( e continue ajustando) o número de caracteres para cada largura fixa. Idealmente, o truncamento aconteceria no navegador, que sabe a largura física do texto renderizado.

Descobri que o IE tem uma text-overflow: ellipsispropriedade que faz exatamente o que eu quero, mas preciso que isso seja entre navegadores. Esta propriedade parece ser (um pouco?) Padrão, mas não é suportada pelo Firefox. Encontrei várias soluções alternativas com base overflow: hidden, mas elas não exibem reticências (quero que o usuário saiba que o conteúdo foi truncado) ou o exibem o tempo todo (mesmo que o conteúdo não tenha sido truncado).

Alguém tem uma boa maneira de ajustar texto dinâmico em um layout fixo ou o truncamento do lado do servidor por largura lógica é tão bom quanto o que eu vou conseguir por enquanto?

Sam Stokes
fonte
2014: veja uma resposta atualizada stackoverflow.com/questions/802175/…
Adrien Seja
related: Aplicando reticências ao texto multilinha
Michael Benjamin

Respostas:

187

Atualização: text-overflow: ellipsisagora é suportada no Firefox 7 (lançado em 27 de setembro de 2011). Yay! Minha resposta original segue como um registro histórico.

Justin Maxwell tem uma solução CSS para vários navegadores. No entanto, ele vem com a desvantagem de não permitir que o texto seja selecionado no Firefox. Confira o post de convidado no blog de Matt Snider para obter todos os detalhes sobre como isso funciona.

Observe que essa técnica também impede a atualização do conteúdo do nó no JavaScript usando a innerHTMLpropriedade no Firefox. Veja o final desta postagem para uma solução alternativa.

CSS

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

ellipsis.xml conteúdo do arquivo

<?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>

Atualizando o Conteúdo do Nó

Para atualizar o conteúdo de um nó de uma maneira que funcione no Firefox, use o seguinte:

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);
    }
};

Veja a publicação de Matt Snider para uma explicação de como isso funciona .

Simon Lieschke
fonte
Isso é incrível, obrigado por apontar! O texto não selecionado e as restrições sobre o conteúdo da div truncada são uma vergonha, mas geralmente isso parece uma boa solução.
9339 Sam Stokes
Apenas real frustração I hit já é que os espaços são processados como & nbsp ;, para recuo não é realmente viável ... = /
Matchu
Também encontrei esse mesmo problema. Não acredito que o Firefox ainda não suporta isso de alguma forma.
mcjabberz
Essa abordagem funciona para qualquer pessoa nos elementos OPTION dos controles SELECT no Webkit e IE8. O Webkit não parece estar fazendo nada por mim e o IE8 apenas o prende sem as reticências.
Rajat
A documentação da Microsoft para text-overflownão indica suporte para optionelementos (consulte a seção Aplica - se a em msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx ).
Simon Lieschke
45

Março de 2014: Truncando seqüências longas com CSS: uma nova resposta com foco no suporte ao navegador

Demonstração em http://jsbin.com/leyukama/1/ (eu uso o jsbin porque ele suporta a versão antiga do IE).

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span>

A propriedade CSS -ms-text-overflow não é necessária: é um sinônimo da propriedade CSS de excesso de texto, mas as versões do IE de 6 a 11 já suportam a propriedade CSS de excesso de texto.

Testado com sucesso (no Browserstack.com) no sistema operacional Windows, para navegadores da web:

  • IE6 a IE11
  • Opera 10.6, Opera 11.1, Opera 15.0, Opera 20.0
  • Chrome 14, Chrome 20, Chrome 25
  • Safari 4.0, Safari 5.0, Safari 5.1
  • Firefox 7.0, Firefox 15

Firefox: como apontado por Simon Lieschke (em outra resposta), o Firefox suporta apenas a propriedade CSS de estouro de texto do Firefox 7 em diante (lançado em 27 de setembro de 2011).

Eu verifiquei esse comportamento novamente no Firefox 3.0 e Firefox 6.0 (o excesso de texto não é suportado).

Seriam necessários alguns testes adicionais em navegadores da Web Mac OS.

Nota: você pode mostrar uma dica de ferramenta ao passar o mouse quando uma reticência é aplicada, isso pode ser feito via javascript, consulte estas perguntas: Detecção de reticulação de transbordamento de texto em HTML HTML e HTML - como mostrar apenas a dica de ferramenta quando as reticências estão ativadas

Recursos:

Adrien Be
fonte
@chiragpatel experimente você mesmo editando esta demonstração ao vivo jsbin.com/leyukama/1
Adrien Be
Para qualquer pessoa interessada, o FF7 <é 0,05% dos usuários do Firefox atualmente
Tom Tom
19

Se você está bem com uma solução JavaScript, há um plug-in jQuery para fazer isso de uma maneira diferente do navegador - consulte http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for -firefox-via-jquery /

RichieHindle
fonte
Definitivamente útil, obrigado! Parece que todos os navegadores, exceto o Firefox, suportam a propriedade CSS, portanto, com este plug-in, as únicas pessoas para as quais ele não funcionaria são os usuários do Firefox que desativaram o Javascript - e de qualquer maneira é uma degradação agradável. Alguma idéia de como são as implicações de desempenho?
23410 Sam
Não, desculpe ... Eu não usei o código na vida real, apenas brinquei com a demo. Seria fácil fazer a demonstração e recortar e colar centenas de vezes na mesma página.
RichieHindle
2
O JavaScript truncado () (seja uma string de pontos para jQuery ou Prototype ou qualquer outra coisa) é apenas uma solução intermediária, porque eles não levam em consideração a largura dos caracteres. Portanto, se você deseja truncar o texto devido a um espaço limitado predefinido, essas funções funcionam apenas de maneira confiável ao usar fontes monoespaçadas. Qualquer solução séria teria que operar com glifos, não com a contagem de caracteres.
Matthias
@ Matthias: Talvez o código tenha sido atualizado desde que você o testou, mas acabei de ver a demonstração e funciona perfeitamente com uma fonte de largura variável.
Julio
7

OK, Firefox 7 implementado text-overflow: ellipsis, bem como text-overflow: "string". O lançamento final está previsto para 27/09/2011.

jj
fonte
6

Outra solução para o problema poderia ser o seguinte conjunto de regras CSS:

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

A única desvantagem do CSS acima é que ele adicionaria o "..." independentemente de o texto estourar o contêiner ou não. Ainda assim, se você tiver um caso em que tenha vários elementos e tiver certeza de que o conteúdo será estourado, esse seria um conjunto de regras mais simples.

Meus dois centavos. Tiremos o chapéu para a técnica original de Justin Maxwell

Rajat
fonte
O problema com o pseudo-código é que "..." ainda é cortado ou oculto se o texto estourar. Eu esperava que, se o texto estourasse, ele garantiria que "..." fosse mostrado. Claramente, esse não é o caso :(
Antony
@ Antony Apenas posicione o pseudo elemento: position: absolute; right: 0;(e não se esqueça position: relativedo elemento real para que ele funcione). Ele se sobrepõe ao texto, portanto, convém adicionar uma cor de fundo também.
last-child