Truncar cadeias longas com CSS: viável ainda?

https://stackoverflow.com/questions/802175

03-07-2019
|

Pergunta

Existe alguma boa maneira de truncar texto com HTML simples e CSS, de modo que o conteúdo dinâmico pode caber em um layout de largura e de altura fixa?

Eu tenho truncando do lado do servidor por lógica largura (isto é, um número cegamente-adivinhou de caracteres), mas uma vez que um 'w' é maior do que um 'i' isso tende a ser abaixo do ideal e também me obriga a re-palpite (e ajustes manter) o número de caracteres para cada largura fixa. Idealmente, o truncamento que aconteceria no navegador, que conhece o física largura do texto processado.

Eu descobri que o IE tem uma propriedade text-overflow: ellipsis que faz exatamente o que eu quero, mas eu preciso que isso seja cross-browser. Esta propriedade parece ser (um pouco?) Padrão mas não é suportado pelo Firefox. Eu encontrei vários soluções baseado em overflow: hidden, mas quer não apresentam reticências (Eu quero o usuário a conhecer o conteúdo foi truncado) ou exibi-lo o tempo todo (mesmo que o conteúdo não foi truncado).

Alguém tem uma boa maneira de ajustar o texto dinâmico em um layout fixo, ou é truncamento do lado do servidor pela largura lógica tão bom quanto eu estou indo para obter por agora?

Solução

Update: text-overflow: ellipsis agora é suportado a partir de Firefox 7 (lançado 27 de setembro de 2011). Yay! Minha resposta original segue como um registro histórico.

Justin Maxwell tem solução CSS cross browser. Ele vem com a desvantagem no entanto de não permitir que o texto a ser selecionado no Firefox. Confira seu hóspede post sobre Matt Snider blogue para os detalhes completos sobre como isso funciona.

Note que esta técnica também impede a atualização do conteúdo do nó em JavaScript usando a propriedade innerHTML no Firefox. Veja o final deste post 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');
}

conteúdo arquivo 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="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

Atualizando conteúdo do nó

Para atualizar o conteúdo de um nó de uma forma que funciona no Firefox use a 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);
    }
};

Matt Snider para uma explicação de como funciona este .

Outras dicas

2014 Março: Truncando cadeias longas com CSS: uma nova resposta com foco no suporte ao navegador

http://jsbin.com/leyukama/1/ (eu uso jsbin porque ele suporta 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-estouro não é necessário:. É um sinônimo da propriedade CSS text-estouro, mas as versões do IE dos 6 aos 11 já suportam a propriedade text-estouro CSS

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

IE6 para 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

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

Eu dobro verificado este comportamento no Firefox 3.0 e Firefox 6.0 (texto de estouro não é suportado).

seriam necessários mais alguns ensaios com uma navegadores Mac OS.

Nota: você pode querer mostrar uma dica de ferramenta no foco do mouse quando uma elipse é aplicada, isso pode ser feito via javascript, consulte esta pergunta: HTML texto de estouro de reticências detecção e HTML - como posso mostrar dica SOMENTE quando reticências é ativado

Recursos:

Se você está OK com uma solução JavaScript, há um jQuery plug-in para fazer isso de uma forma cross-browser - veja http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for-firefox-via -jquery /

text-overflow: ellipsis OK, Firefox 7 implementado, bem como text-overflow: "string". versão final está prevista para 2011-09-27.

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 com o CSS acima é que ele gostaria de acrescentar o "..." independentemente do texto-transborda do recipiente ou não. Ainda assim, se você tem um caso onde você tem um monte de elementos e temos a certeza de que o conteúdo vai transbordar, este seria um conjunto simples de regras.

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

Para referência, aqui está um link para o "bug" tracking text-overflow: reticências apoio no Firefox . Parece que o Firefox é o único grande navegador esquerda que não suporta uma solução CSS nativa.

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow