Verificação HTML: CSS: "text-overflow": X não é um valor de "text-overflow".

Sobre este problema de CSS

A propriedade CSS text-overflow controla como o conteúdo em excesso que não é exibido é sinalizado aos utilizadores. Aplica-se quando o overflow de um elemento está oculto (por exemplo, overflow: hidden) e o conteúdo excede a caixa do elemento. A propriedade aceita valores específicos, e usar qualquer coisa fora do conjunto permitido — como uma palavra-chave mal escrita, uma string sem aspas, ou um valor inventado — irá desencadear este erro de validação.

Valores aceites

A propriedade text-overflow aceita os seguintes valores:

clip — Trunca o texto na borda da área de conteúdo. Os caracteres podem ser cortados a meio do glifo. Este é o padrão.
ellipsis — Exibe um carácter de reticências (…) para indicar texto cortado.
Uma <string> personalizada — Uma string entre aspas para exibir no ponto de corte (por exemplo, " [..]"). Note que o suporte do browser para strings personalizadas é limitado.
Valores globais CSS — inherit, initial, revert, revert-layer, e unset.

A propriedade pode receber um ou dois valores. Se for dado um valor, especifica o comportamento de overflow para o final da linha (o final direito para texto da esquerda para a direita, o final esquerdo para texto da direita para a esquerda). Se forem dados dois valores, o primeiro controla o final esquerdo da linha e o segundo controla o final direito. A sintaxe de dois valores tem suporte limitado nos browsers.

Erros comuns que desencadeiam este erro incluem:

Escrever mal ellipsis (por exemplo, elipsis, ellipses).
Usar um valor de uma propriedade diferente (por exemplo, hidden, scroll, auto).
Usar uma string personalizada sem aspas em vez de uma com aspas adequadas.
Usar um valor numérico ou de comprimento (por exemplo, 10px), que não é válido para esta propriedade.

Porque isto importa

Valores CSS inválidos são ignorados pelos browsers, o que significa que a propriedade irá recorrer ao seu padrão (clip) em vez de se comportar como você pretendia. Isto pode levar ao texto ser cortado abruptamente sem qualquer indicador visual, prejudicando a legibilidade e a experiência do utilizador. Corrigir erros de validação também garante que as suas folhas de estilo são limpas, previsíveis e fáceis de manter.

Exemplos

Incorreto — palavra-chave mal escrita

/* "elipsis" não é um valor text-overflow válido */
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: elipsis;
}

Incorreto — valor de outra propriedade

/* "hidden" é um valor overflow, não um valor text-overflow */
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: hidden;
}

Incorreto — string personalizada sem aspas

/* Strings personalizadas devem estar entre aspas */
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: [more];
}

Correto — usando `ellipsis`

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

Correto — usando `clip` (o padrão)

.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

Correto — usando uma string personalizada entre aspas

.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: " [..]";
}

Correto — sintaxe de dois valores

/* Final esquerdo usa ellipsis, final direito usa uma string personalizada */
.truncated {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis " [..]";
}

Note que text-overflow por si só não força a ocorrência de overflow. Para fazer o texto realmente truncar, você normalmente precisa de overflow: hidden (ou outro valor de overflow não-visível) e white-space: nowrap no elemento. A propriedade text-overflow apenas controla como o conteúdo cortado é sinalizado visualmente.