Prestados os dados largura de pixel para cada personagem em fonte de um navegador

Question

Eu tenho uma coluna de tabela que precisa ser limitado a uma determinada largura - digamos 100 pixels. Às vezes o texto na coluna que é mais amplo do que isso e não contém espaços. Por exemplo:

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy

Gostaria de calcular a largura de server-side texto e adicionar uma elipse após o número correto de caracteres. O problema é que eu não tenho dados sobre o tamanho processado do texto.

Por exemplo, supondo que o navegador foi Firefox 3 e a fonte foi 12px Arial. Qual seria a largura da letra "a", a largura da letra "b", etc.?

Você tem dados que mostram a largura de pixel de cada personagem? Ou um programa para gerá-lo?

Eu acho que um script javascript one-time inteligente poderia fazer o truque. Mas eu não quero passar o tempo re-inventar a roda se alguém já fez isso. Eu não sou certamente a primeira pessoa a vir contra este problema.

Answer 1

Este não só seria impossível fazer do lado do servidor, ele também não faria sentido. Você não fazer o navegador seu cliente estará usando, e você não sabe o tipo de letra configurações no lado do cliente irá substituir o que quer denominar informações que você atribui a um pedaço de HTML. Você pode pensar que você está usando pixels de posicionamento absoluto em suas propriedades de estilo, mas o cliente poderia ser simplesmente ignorando os ou usando algum plugin para zoom tudo, porque o cliente usa uma tela de alta-dpi.

Usando larguras fixas é geralmente uma má idéia.

Answer 2

Como cerca de overflow:? Rolagem

Answer 3

Ext JS tem um módulo para fazer exatamente isso

TextMetrics Fornece medições precisas de pixels para blocos de texto de modo que você pode determinar exatamente o quão alto e largo, em pixels, de um determinado bloco de texto será estar.

Estou certo de que há outras bibliotecas disponíveis lá fora, que fazê-lo bem.

Answer 4

Muito, muito difícil de fazer do lado do servidor. Você nunca pode saber quais fontes usuários não instalado, e há muitas coisas que afetam a exibição do texto.

Tente isto em vez disso:

table-layout: fixed;

Isso vai garantir que a mesa não é maior do que o tamanho especificado.

Answer 5

Aqui está a minha solução do lado do cliente que eu vim acima com. É bastante específico para a minha candidatura, mas eu estou compartilhando isso aqui no caso de alguém se depara com o mesmo problema.

Ele funciona um pouco mais rapidamente do que eu esperava. E assume o conteúdo das células são apenas texto -. Qualquer HTML irá formatação serão eliminados no processo de encurtamento

Ela exige jQuery.

function fixFatColumns() {
  $('table#MyTable td').each(function() {
    var defined_width = $(this).attr('width');
    if (defined_width) {
      var actual_width = $(this).width();
      var contents = $(this).html();
      if (contents.length) {
        var working_div = $('#ATempDiv');
        if (working_div.is('*')) {
          working_div.html(contents);
        } else {
          $('body').append('<div id="ATempDiv" style="position:absolute;top:-100px;left:-500px;font-size:13px;font-family:Arial">'+contents+'</div>');
          working_div = $('#ATempDiv');
        }

        if (working_div.width() > defined_width) {
          contents = working_div.text();
          working_div.text(contents);
          while (working_div.width() + 8 > defined_width) {
            // shorten the contents of the columns
            var working_text = working_div.text();
            if (working_text.length > 1) working_text = working_text.substr(0,working_text.length-1);
            working_div.text(working_text);
          }
          $(this).html(working_text+'...')
        }

        working_div.empty();
      }

    }
  });

}

Answer 6

Esta é essencialmente impossível de se fazer no lado do servidor. Além do problema de pessoas com diferentes tipos de letra instalado, você também kerning (a letra "f" vai ocupar uma quantidade diferente de espaço, dependendo do que está ao lado dele) e opções de renderização de fonte (é cleartype on? "Fontes grandes "?).

Answer 7

Não há nada que você pode fazer do lado do servidor para calculá-lo. Tudo que você tem que trabalhar com é a string de identificação do navegador, que pode ou não pode dizer-lhe o sistema operacional do usuário e navegador com precisão. Você também pode "pedir" (através de um tag fonte ou CSS) para um determinado tipo de letra a ser usado para exibir o texto, mas não há garantia de que o usuário tem que fonte instalada. Além de que o usuário pode ter uma configuração diferente DPI no nível do sistema operacional, ou poderia ter feito o texto maior ou menor com a função de zoom do browser, ou poderia estar usando seu próprio estilo completamente.

Answer 8

Você pode colocar o texto em um espaço invisível e ler que abrange largura, mas basicamente isso se parece com alguém tentando sabotar seu site, e, portanto, eu recomendaria que proíbe mensagens com palavras com mais de um certo lenth, por exemplo 30 caracteres sem espaços (permitindo links para ser mais -!)

- mas a abordagem simples é colocar um bloco de elementos no interior da célula tabela:

<td><div style="width:100px;overflow:hidden">a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_ta ... </div></td>

Isto irá efetivamente parar a mesa-desordenar! O]

Answer 9

Se você estiver ok com isto não trabalha para o Firefox, por que não usar CSS? Tenha a tabela com table-layout: fixed, tem a coluna em questão tem overflow: hidden; text-overflow: reticências; white-space:. nowrap

Answer 10

http://www.css3.info/preview/text-overflow/

Esta é uma nova função de CSS3.

Answer 11

Alguns usuários têm configurações maiores ou menores de fonte padrão. Você não pode fazer isso no servidor. Você só pode medi-lo uma vez que o navegador tenha prestado a página.

Answer 12

Uma vez que o tamanho da fonte pode ser facilmente alterado no lado do navegador, o seu cálculo do lado do servidor é feita inválida com muita facilidade.

Uma correção do lado do cliente rápida seria estilo suas células com um atributo overflow:

td
{
    overflow: scroll; /* or overflow: hidden;  etc. */
}

A melhor alternativa é para truncar o lado do servidor cordas e fornecer uma dica de ferramenta javascript simples que pode exibir a versão mais longa. Um "expandir" botão pode também ajuda que poderia exibir o resultado em uma div sobreposição.

Answer 13

O que você quer é a tag . Esta é uma tag HTML especial que informa ao navegador que é aceitável para quebrar uma palavra aqui se um envoltório é necessário. Eu não iria injetar o no texto para armazenamento persistente, porque então você está acoplando os seus dados com o local onde / como você vai exibir esses dados. No entanto, é perfeitamente aceitável para injetar lado do servidor marcas no código que é vista-centric (como com uma tag JSP ou possivelmente no controlador). É assim que eu iria fazê-lo. Basta usar alguma expressão regular para encontrar palavras que são mais de caracteres X e injetar essa tag a cada X caracteres em tais palavras.

Update: Eu estava fazendo alguns olhando ao redor e parece que wbr não é compatível com todos os navegadores. Mais notavelmente, IE8. Eu não testei isso mesmo embora. Talvez você poderia usar overflow:. Escondida como um backup ou algo parecido