Prefácio
Esta situação será encontrada durante o desenvolvimento. Apenas duas linhas são exibidas. Se mais de duas linhas forem excedidas, um botão "show mais" será exibido. Clique no botão para exibir o conteúdo das linhas restantes. Existe um plug -in de jQuery que loadingDots implementa especificamente essa função. No entanto, hoje vamos usar o JavaScript nativo para implementar esse requisito. Para atingir esse requisito, o mais importante é determinar o número de linhas do texto neste contêiner. Depois de obter o número de linhas, modifique a altura do elemento e determine se o botão de carga é exibido.
window.getComputedStyle ()
Para usar o código JavaScript nativo para obter as propriedades de estilo individual de um elemento, é inevitável usar window.getComputedStyle() . Ele pode retornar os estilos de um elemento HTML quando ele é realmente exibido no navegador - é claro, alguns estilos serão bloqueados pelo navegador. Por exemplo, se você deseja obter a cor de um link e estar preparado para julgar se o usuário visitou um determinado endereço por cor, isso definitivamente não é possível.
O método retorna um par de valores-chave de estilo, que é uma instância de CSSStyleDeclaration . Os nomes de índices de cada atributo não possuem - e a nomenclatura de camelo é adotada. Por exemplo, lineHeight .
Número de linhas = altura geral/altura da linha
A altura geral pode ser obtida através da altura. A altura da linha pode ser obtida através lineHeight e o resultado é arredondado para obter o número de linhas.
Mas há um problema, se line-height não estiver definido para um elemento, seu valor padrão será normal , que geralmente é de 1,2 nos navegadores de mesa, mas também está relacionado a fontes. Portanto, é melhor definir line-height para elementos que precisam calcular o número de linhas.
Uma implementação simples é a seguinte:
Funções Countlines (ELE) {var styles = Window.getComputedStyle (ele, nulo); var lh = parseint (styles.lineHeight, 10); var H = parseint (Styles.Height, 10); var LC = Math.Round (H / LH); console.log ('contagem de linhas:', lc, 'altura da linha:', lh, 'altura:', h); retornar LC;}Exemplo de código completo
<! Doctype html> <html> <head> <title> contagem de linha </title> <style type = "text/css"> p {altura de linha: 1.3em; } </style> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"> </head> <body> <p id = "alvo"> ela acabou de fazer com que um bebê pareça adorável. Tudo é branco e ela sempre tem uma torta de mirtilo fresca que está fumegante, scones e creme fechado, e ela está lendo o velho e o mar e seu garotinho é rolly com capô. É incrível, e eu pensei que isso é adorável. Meu filho é como brincar com dispositivos explosivos. Não sei onde ela os encontrou, como enfiá -los na orelha do nosso cachorro. Ela já sabe como secar a parede porque coloca buracos na parede. o bolso. " Cheng Yawen, professor da Escola de Relações Internacionais e Relações Públicas da Universidade de Estudos Exteriores de Xangai, apontou em seu novo livro "Potências estratégicas de grandes potências", que muitas pessoas na China agora estão presas na ilusão de "prosperidade" e não percebem que, por trás do agregado econômico total, a China é na verdade um país extremamente atrasado. Não existe um grande país no mundo que surgiu em uma situação calma e pacífica, e a nova rodada de rejuvenescimento da civilização da China também estará cheia de riscos e reviravoltas. Impedir que um país colapse, a desintegração ou declínio deve se tornar a principal prioridade da estratégia nacional da China. O aprofundamento da "felicidade suave" só tornará um país vulnerável. </p> <p> Número de linhas: <span id = "chuveiro"> </span> </p> Altere o tamanho da janela e calcule automaticamente <botão onclick = "contingLines ()"> calcule imediatamente </button> <script type = "text/javascript"> var Target = DocumentElementById ('alvo'); window.getComputedStyle (ele, nulo); var lh = parseint (styles.lineHeight, 10); var H = parseint (Styles.Height, 10); var LC = Math.Round (H / LH); console.log ('contagem de linhas:', lc, 'altura da linha:', lh, 'altura:', h); retornar LC;} função alteração () {chuveiro.innerhtml = countLines (Target);} window.onResize = alteração; alteração;Resumir
O acima é tudo sobre este artigo. Espero que o conteúdo deste artigo seja útil para todos que usam JavaScript. Se você tiver alguma dúvida, deixe uma mensagem para discutir.