JavaScript exibe o efeito elipsis após exceder o contêiner
Em projetos reais, devido à incerteza do comprimento do conteúdo do texto e à fixação do layout da página, é inevitável que o conteúdo do texto exceda a área DIV (ou outras tags, a mesma abaixo). A melhor maneira neste momento é exibi -lo automaticamente em uma elipse (...) quando o texto exceder a largura limitada da div. Dessa forma, de acordo com o costume, as pessoas saberão que existem textos aqui omitidos. Existe uma propriedade no CSS chamada Text-Overflow: Ellipsis; Por exemplo, você pode escrever assim usando CSS:
{largura: 27em; Espaço branco: Nowrap; Fluxo de text-overflow: elipsis; -o-text-overflow: elipsis; Overflow: Hidden;} A elipse de excesso de texto não pode ser implementada apenas no navegador Firefox e o texto é retirado diretamente do meio. Não falo sobre como usar o CSS para implementar isso. A implementação específica do CSS pode ser usada no Baidu. O mais importante aqui é como implementá -lo com JS e como escrever um componente simples através do JS. Posso chamar diretamente o método de inicialização do JS para implementá -lo! Por exemplo, os seguintes efeitos:
Os pontos e pontos no verso solicitam ao usuário que há mais conteúdo que não foi exibido para concluir esse efeito!
Diga menos bobagem primeiro! Primeiro, vamos dar uma olhada no efeito demo que eu fiz e você entenderá o que é!
Se você quiser ver o efeito, clique em mim! OK?
1: Vamos dar uma olhada nos itens de configuração de componentes primeiro:
TargetCls
nulo, os itens necessários para o contêiner a ser interceptado pelo alvo são nulos por padrão
LIMITLINENNumber 1, o número de linhas a serem exibidas é 1 linha por padrão
Digite '...', tipo que excede o comprimento do contêiner é exibido por padrão para elipsis
LineHeight 18, a altura da linha padrão do nó DOM é 18
ISSHOWTITLE TRUE, o título é necessário para exibir todos os conteúdos. O padrão é verdadeiro
ischarlimit limites falsos para exibir elipsis com base no comprimento do personagem
Maxlength 20 O comprimento padrão é 20. As elipsis serão exibidas após exceder o caractere 20.
Dois: Análise
1. Primeiro, vamos falar sobre esse componente: apoie duas maneiras de interceptar seqüências de strings. Primeiro: intercepte de acordo com a duração dos caracteres e exiba as elipsis depois de excedê -los. Por exemplo, eu chamo assim:
Novo multiellipsis ({
"TargetCls": '.Text8',
"ischarlimit": verdadeiro,
"Maxlength": 18
});
A inicialização dessa maneira significa que o ischarlimit é verdadeiro, o que significa interceptar com o número de caracteres. O comprimento máximo máximo é 18. Inicialização dessa maneira, porque o código primeiro determinará que, se o ischarlimit for verdadeiro, será interceptado diretamente de acordo com o número de caracteres, como o seguinte código:
2. O segundo tipo é interceptado com base no número de linhas e alturas. Por exemplo, a altura da linha do item de configuração padrão é 18. Se eu quiser exibir 2 linhas, ou seja, a altura H = 18*2. Se a altura do contêiner for 100, o método de interceptação é:
Use (100 - comprimento do tipo - 1) se é maior que 18 × 2, se for maior que, continue a interceptar, caso contrário, não interceptará e o efeito ElipSis será exibido! O seguinte código:
Desvantagens: No entanto, se você usar a interceptação de alta linha, tudo bem se os dados forem relativamente pequenos, mas se houver muitos dados, como uma altura de 500 pixels ou mais, isso afetará relativamente o desempenho, porque eles precisam calcular n vezes a cada vez (N significa que há muitas funções que lixam o loop).
Todos os códigos JS são os seguintes:
Copie o código
/ * * Multiellipsis baseado em js * @author tugenhua */ função multiellipsis (opções) {var self = this; self.options = $ .extend ({}, padrões, opções || {}); self._init (); } $ .extend (multiellipsis.prototype, {// página inicialização_init: function () {var self = this, cfg = self.options; if (cfg.targetcls == null || $ (cfg.targetcls + ") [0] === RULL) vazio! ");} return;} if (cfg.ISSHOWTITLE) {// Adicione o atributo de título para obter o texto do elemento var title = self.getText (); $ (cfg.targetcls) .attr ({" title ": title};} // se for limitado por caracteres; depois, retornar diretamente ({title": sem altura sem altura; } self._compareHeight (cfg.lineHeight * cfg.limitlineNumber); if (text.length> cfg.maxLength) {var curaxt = text.substring (0, cfg.maxlength); O conteúdo html diretamente * @Method getText {public} */ getText: function () {var self = this, cfg = self.options; = isto, cfg = auto.option; "") [0]. HTML (Texto); maxlineHeight) {self._deleteText (self.getText ()); Text.Substring (0, TEXTO - TypeLen - 1); function () {var self = this, cfg = self.options; var defaults = { 'targetCls' : null, // The container to be intercepted by the target'limitLineNumber' : 1, // The number of rows limited by the number of rows* The row height of a line>= The height of the container's 'type' : '...', // The type that exceeds the length is displayed by the default is the ellipsis 'lineHeight' : 18, // The line height of the dom Node'issHowtitle ': true, // se o título exibe todo o conteúdo é verdadeiro por padrão' ischarlimit ': false, // a elipse de tela é limitada pelo comprimento do caractere' maxlength ': 20 // inadimplência é 20};O método acima para exibir o efeito elipse após o JavaScript excede o contêiner (compatível com uma linha ou várias linhas) é todo o conteúdo que eu compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.