Determinar a largura de um impresso de cadeia por um webapp

StackOverflow https://stackoverflow.com/questions/33893

  •  09-06-2019
  •  | 
  •  

Pergunta

Na minha (PHP) web app, eu tenho uma parte do meu site que mantém um histórico de pesquisas recentes.A maioria das consultas recentes são mostrados em uma caixa de lado.Se a consulta de texto é muito longo, eu truncá-lo, e mostrar reticências.Por exemplo:"Meu muito consulta é..."

Atualmente, eu truncar após um determinado número de caracteres.Desde que a fonte não é monotype, uma consulta de tudo o que me é mais estreita do que uma consulta de todos os W.Eu gostaria de estar todos aproximadamente a mesma largura antes de reticências.Existe uma maneira de obter a largura aproximada de seqüência de caracteres resultante, de modo que as reticências para qualquer seqüência de caracteres vai ocorrer em aproximadamente o mesmo número de pixels a partir do início?Não CSS tem uma forma?Faz PHP?Isso seria melhor tratada pelo JavaScript?

Foi útil?

Solução

Aqui está outra opinião sobre isso e você não precisa viver sem as reticências!

<html>
<head>

<style>
div.sidebox {
    width: 25%;
}

div.sidebox div.qrytxt {
    height: 1em;
    line-height: 1em;
    overflow: hidden;
}

div.sidebox div.qrytxt span.ellipsis {
    float: right;
}
</style>


</head>

<body>

<div class="sidebox">
    <div class="qrytxt">
        <span class="ellipsis">&hellip;</span>
        Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
    </div>
    <div class="qrytxt">
        <span class="ellipsis">&hellip;</span>
        Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
    </div>
    <div class="qrytxt">
        <span class="ellipsis">&hellip;</span>
        Short text. Fail!
    </div>
</body>

</html>

Há uma falha com isso, se o texto é curto o suficiente para ser totalmente exibido, as elipses ainda será exibido como bem.

[EDITAR:6/26/2009]

A sugestão de Poder-Coder eu revisei isso um pouco.Há realmente apenas duas alterações, a adição de doctype (ver notas abaixo) e a adição de display: inline-block atributo .qrytxt DIV.Aqui é o que parece, agora...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <style>
        div.sidebox 
        {
            width: 25%;
        }

        div.sidebox div.qrytxt
        {
            height: 1em;
            line-height: 1em;
            overflow: hidden;
            display: inline-block;
        }

        div.sidebox div.qrytxt span.ellipsis
        {
            float: right;
        }
</style>
</head>

<body>
    <div class="sidebox">
        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            <span class="ellipsis">&hellip;</span>
            Short text. FTW
        </div>
    </div>
</body>
</html>

Notas:

  • Visualizado no IE 8.0, Opera 9, FF 3

  • Um doctype é necessário para o IE para obter o display: inline-block para funcionar corretamente.

  • Se o .qrytxt DIV estouro ocorre em uma palavra longa, vai haver uma grande diferença entre a elipse e a última visível palavra.Você pode ver isso através do exemplo e redimensionar a janela do seu navegador largura em pequenos incrementos.(isso provavelmente existia no exemplo original, bem, eu simplesmente pode não ter notado isso depois)

Então, novamente, um imperfeito CSS-única solução.Javascript pode ser a única coisa que pode obter o efeito perfeito.

[EDITAR:6/27/2009]

Aqui é outra alternativa que utiliza o navegador de extensões específicas.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <style>
        div.sidebox 
        {
            width: 26%;
        }

        div.sidebox div.qrytxt
        {
            height: 1em;
            line-height: 1em;
            overflow: hidden;
            text-overflow:ellipsis;
            -o-text-overflow:ellipsis;
            -ms-text-overflow:ellipsis;
            -moz-binding:url(ellipsis-xbl.xml#ellipsis);
            white-space:nowrap;
        }
    </style>
</head>

<body>
    <div class="sidebox">
        <div class="qrytxt">
            Some long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            Some more long text which will arbitrarily be cut off at whatever word fits best but will have an ellipsis at the end.
        </div>

        <div class="qrytxt">
            Short text. FTW
        </div>
    </div>
</body>
</html>

Observe que, para o exemplo acima funcionar, você deve criar o arquivo xml referenciado por o -moz-norma obrigatória, ellipsis-xbl.xml.Ele deve conter o seguinte xml:

<?xml version="1.0" encoding="UTF-8"?>
  <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>

Outras dicas

Você também pode facilmente usar um pouco de javascript:

document.getElementByID("qrytxt").offsetWidth;

vai dar a você a largura de um elemento em pixels e até mesmo funciona no IE6.Se você acrescentar um intervalo contendo reticências ao final de cada consulta um simples teste lógico no JavaScript com um pouco de manipulação de CSS pode ser usado para esconder/mostrar-lhes como necessário.

Não CSS tem uma forma?

Nenhum

Faz PHP?

Nenhum

-

Para fazer isso você tem que obter as métricas de fonte para cada personagem, e aplicá-los a todas as suas cartas em sua cadeia.Enquanto você pode fazer isso usando um desenho/biblioteca de renderização como o ImageMagick no servidor, ele não funcionar devido a diferentes navegador no sistema operativo diferente do de renderização de fontes de forma diferente.

Mesmo se ele fez um trabalho, você não gostaria de fazê-lo, porque ele também levaria uma eternidade para compor.Seu servidor deve ser capaz de empurrar 1 página por segundo (se) em vez de vários milhares.

Se você pode viver sem o final ..., então você pode muito bem fingir usando div marcas e css overflow: hidden, como este:

.line_of_text {
    height:1.3em;
    line-height:1.3em;
    overflow:hidden;
}

<div class="line_of_text"> Some long text which will arbitrarily be cut off at whatever word fits best</div>

O PHP deve ser deixado de fora de consideração completamente devido ao fato de que, apesar de haver uma função projetado para medição de fontes, http://www.php.net/imageftbbox , não há nenhuma maneira para o PHP para saber se o visitante tem um tamanho mínimo de fonte de instalação que é maior do que o previsto tamanho do tipo de letra.

@Robert

o que se você colocar reticências em um div com um baixo z-index de modo que quando se move para a esquerda (para linhas mais curtas) eles ficam cobertas por uma imagem de plano de fundo ou algo assim?

é muito hacky eu sei, mas hey, vale a pena tentar né?

editar Outra idéia:determinar a posição da div que contém o elipses com javascript e, caso não o empurrou toda a maneira direita, a esconder?

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top