Uma elipse é uma marca de pontuação composta de três pontos que são usados ​​para indicar a ausência de uma palavra, parágrafo, citação ou mais. Freqüentemente na ficção, utilizamos as elipsis para indicar hesitação ou algo para aumentar a curiosidade. Mais especificamente, essas elipses são utilizadas onde a frase não está concluída. Então, para mostrar elipsis na sua página da web, o text-overflow do CSS Property com elipsis de valor pode ser utilizado.

Este artigo o guiará por que a propriedade Text-Overflow com ElipSis de Valor não funciona.

Por que as elips de fluxo de texto não funcionam no CSS?

Discutiremos o tópico declarado usando uma demonstração prática.

Para fazer isso, em html, primeiro, adicione um elemento div com o nome da classe “principal”. Então, adicione

Elemento para adicionar um título à página da web, uma div com o nome da classe “subseção”, Que contém duas classes div,“seção esquerda" e "seção direita”. Esses dois elementos div contêm

elementos para o cabeçalho, e então algum conteúdo é adicionado a eles. Finalmente, um

A tag é adicionada para adicionar algum conteúdo.

Html

Bem -vindo à Escola Linuxhint

Educação de qualidade

Fornecemos educação de qualidade ao mundo!

Redação de artigos

Um autor técnico escreve artigos sobre tópicos de ciência da computação.

Você pode aprender quaisquer tópicos de ciência da computação no site Linuxhint. Nossa primeira prioridade é o nosso público.

A estrutura da página da web é concluída e pode ser vista na imagem abaixo:

A próxima seção demonstrará como aplicar propriedades de estilo aos elementos HTML. Para esse fim, adicione a propriedade “Text-overflow"Com o valor"elipses" para o

elemento, "seção esquerda", e "seção direita”. Vamos ver o que acontecerá quando esta propriedade for aplicada aos elementos.

Estilo div

.principal
Largura: 500px;
margem: 2px automático;
preenchimento: 8px;
Radio de fronteira: 10px;
Background-Color: #432C7a;
Cor: Ghostwhite;

O ".principal”Refere -se ao elemento div ter o nome de classe principal. A descrição das propriedades CSS aplicadas é dada abaixo:

• ““largura”A propriedade é utilizada para definir a largura do elemento como“500px”.
• ““margem”A propriedade está definida como“2px Auto”, Que especificará um espaço de 2px no fundo superior e espaço igual para os lados esquerdo-direita da div.
• ““preenchimento”Propriedade com o valor“8px”Adiciona um espaço de 8px em torno do conteúdo do Div Main.
• ““Radio de fronteira”Propriedade faz com que os cantos do elemento div arredondados.
• ““cor de fundo”Propriedade define a cor especificada para o fundo do elemento.
• ““cor”Propriedade define a cor para a fonte do elemento.

Estilo P Elemento

.principal,
.seção esquerda,
.Seção direita P
Size da fonte: 18px;

O

O elemento da divisão principal, seção esquerda e seção direita é fornecida com o “tamanho da fonte" como "18px”.

Estilo H1 elemento da div principal

.H1 principal
Fluxo de text-overflow: elipsis;

Utilize o “Text-overflow”Propriedade com o valor“elipse" para o

Elemento do Div Main.

Subseção de estilo div

.Subseção
exibição: flex;

O elemento div com o nome da classe “subseção”É aplicado com a propriedade de exibição“flex”Para fazer um layout flexível e responsivo.

Estilo de seção esquerda div

.seção esquerda
Background-Color: #FA9393;
preenchimento: 3px;
margem: 1px;
Radio de fronteira: 10px;

O ".seção esquerda”Refere-se à seção esquerda da classe do elemento div. A explicação das propriedades aplicadas a esse elemento div é dada abaixo:

• ““cor de fundo”A propriedade aplica a cor ao fundo do elemento.
• ““preenchimento”Propriedade produz um espaço em torno do conteúdo da seção esquerda Div.
• ““margem”Propriedade produz um espaço ao redor do elemento Div da seção esquerda.
• ““Radio de fronteira”Propriedade faz as bordas pontiagudas.

Estilo de seção direita div

.seção direita
Background-Color: #ff8fb1;
preenchimento: 3px;
margem: 1px;
Fluxo de text-overflow: elipsis;
Radio de fronteira: 10px;

As seguintes propriedades são aplicadas ao elemento div com o nome da classe “seção direita”:

• ““cor de fundo”A propriedade aplica a cor ao fundo do elemento.
• ““preenchimento”Propriedade adiciona espaço em torno do conteúdo da seção esquerda div.
• ““margem”Propriedade adiciona espaço ao redor do elemento Div da seção esquerda.
• ““Text-overflow”Com o valor elipsis é utilizado para sinalizar para o usuário que o excesso deste texto está oculto.
• ““Radio de fronteira”A propriedade é utilizada para converter as bordas do elemento em volta.

Ao fornecer o código acima, o resultado é exibido da seguinte forma:

Pode ser visto na imagem acima que o texto do cabeçalho

, Seção esquerda e a seção direita não é exibida no texto elipsis. Agora, na próxima seção, aplicaremos a propriedade Text-Overflow com outras propriedades que ajudarão a tornar o texto com as elipsis (…).

Como usar as elips de fluxo de texto em CSS?

O text-overflow da propriedade funciona em combinação com as outras propriedades em espaço em branco com o valor agora, transbordando com o valor oculto:

Espaço branco: Nowrap;
estouro: oculto;
Fluxo de text-overflow: elipsis;

A descrição das propriedades é mencionada abaixo:

• ““espaço branco”Propriedade com o valor“Nowrap”É utilizado para ajustar o texto em uma linha reta.
• ““transbordar”Propriedade com o valor“escondido”É utilizado para ocultar o texto de transbordamento.
• ““Text-overflow”Propriedade com o valor“elipse”É utilizado para transformar o texto em uma elipse.

Saída

É isso! Aprendemos com sucesso por que a elipse de fluxo de texto do CSS não funciona e como consertá-la.

Conclusão

No CSS, a propriedade Text-Overflow pode receber o valor elipse do valor. Mas não funcionará sozinho. As elipsis funcionam no elemento que tem a largura é definido em “píxeis", A propriedade do espaço branco deve ser especificado como"Nowrap”, E o valor da propriedade Overflow como“escondido”. Este artigo demonstrou como a propriedade CSS Text-Overflow com o valor Ellipsis funciona e forneceu um exemplo relevante.