Un elipsis es un signo de puntuación compuesto por tres puntos que se utilizan para indicar la ausencia de una palabra, párrafo, cita o más. Con frecuencia en ficción, utilizamos los elipsis para indicar dudas o algo para desarrollar curiosidad. Más específicamente, estas elipses se utilizan donde no se completa la oración. Entonces, para mostrar los elipsis en su página web, se puede utilizar la propiedad de la propiedad de CSS con el valor de los ellipsis de valor.

Este artículo lo guiará a través de por qué la propiedad de texto de texto con valor ellipsis no funciona.

¿Por qué no funciona las elipsis de texto-superflujo en CSS??

Discutiremos el tema declarado utilizando una demostración práctica.

Para hacerlo, en HTML, primero, agregue un elemento Div con el nombre de la clase "principal". Luego añade

Elemento para agregar un rumbo a la página web, un DIV con el nombre de la clase "subsección"Que contiene dos clases Div,"sección izquierda" y "sección correcta". Estos dos elementos div contienen

elementos para encabezar, y luego se les agrega algo de contenido. Por fin, un

Se agrega la etiqueta para agregar algo de contenido.

Html

Bienvenido a la escuela Linuxhint

Educación de calidad

Brindamos educación de calidad al mundo!

Redacción de artículos

Un autor técnico escribe artículos sobre temas de informática.

Puede aprender cualquier tema de ciencias de la computación del sitio web de Linuxhint. Nuestra primera prioridad es nuestra audiencia.

La estructura de la página web se completa y se puede ver en la imagen a continuación:

La siguiente sección demostrará cómo aplicar propiedades de estilo a los elementos HTML. Para este propósito, agregue la propiedad "texto de texto"Con el valor"elipses" hacia

elemento, "sección izquierda", y "sección correcta". Veamos qué sucederá cuando esta propiedad se aplique a los elementos.

Estilo principal Div

.principal
Ancho: 500px;
Margen: 2px Auto;
relleno: 8px;
Border-Radius: 10px;
Color de fondo: #432C7A;
Color: Ghostwhite;

El ".principal"Se refiere al elemento div tiene nombre de clase principal. La descripción de las propiedades CSS aplicadas se da a continuación:

• "ancho"La propiedad se utiliza para establecer el ancho del elemento en"500px".
• "margen"La propiedad está establecida en"2px Auto"Que especificará un espacio de 2px en el fondo superior e igual al espacio a los lados de la izquierda derecha del Div.
• "relleno"Propiedad con el valor"8px"Agrega un espacio de 8px alrededor del contenido del Div Main.
• "radio fronterizo"La propiedad hace las esquinas del elemento Div redondeado.
• "color de fondo"La propiedad establece el color especificado en el fondo del elemento.
• "color"La propiedad establece el color en la fuente del elemento.

Elemento de estilo P

.principal,
.sección izquierda,
.Sección correcta P
tamaño de fuente: 18px;

El

El elemento del Div Main, la sección izquierda y la sección derecha se proporciona con el "tamaño de fuente" como "18px".

Estilo h1 elemento del divir principal

.principal H1
Texto-Overflow: Ellipsis;

Utilizar el "texto de texto"Propiedad con el valor"elipsis" hacia

Elemento del Div Main.

Estilo subsection Div

.subsección
Pantalla: Flex;

El elemento divir con el nombre de la clase "subsección"Se aplica con la propiedad de visualización"doblar"Para hacer un diseño flexible y receptivo.

Estilo Div S-Sección Left-Sección

.Sección de izquierda
Color de fondo: #FA9393;
relleno: 3px;
margen: 1px;
Border-Radius: 10px;

El ".sección izquierda"Se refiere a la clase de la clase a la izquierda del elemento div. La explicación de las propiedades aplicadas a este elemento div se da a continuación:

• "color de fondo"La propiedad aplica el color al fondo del elemento.
• "relleno"La propiedad produce un espacio alrededor del contenido del DIV de la sección izquierda.
• "margen"La propiedad produce un espacio alrededor del elemento div de la sección izquierda.
• "radio fronterizo"La propiedad hace que los bordes puntiagudos.

Estilo Div Sección Right Sesion

.sección correcta
Color de fondo: #FF8FB1;
relleno: 3px;
margen: 1px;
Texto-Overflow: Ellipsis;
Border-Radius: 10px;

Las siguientes propiedades se aplican al elemento Div con el nombre de la clase "sección correcta":

• "color de fondo"La propiedad aplica el color al fondo del elemento.
• "relleno"La propiedad agrega espacio alrededor del contenido del DIV de la sección izquierda.
• "margen"La propiedad agrega espacio alrededor del elemento DIV de la sección izquierda.
• "texto de texto"Con el valor se utiliza ellipsis para indicarle al usuario que el desbordamiento de este texto está oculto.
• "radio fronterizoLa propiedad se utiliza para convertir los bordes del elemento en redondeo.

Al proporcionar el código anterior, el resultado se muestra de la siguiente manera:

Se puede ver en la imagen de arriba que el texto del encabezado

, Sección izquierda y la sección derecha no se muestra en el texto de ellipsis. Ahora, en la siguiente sección, aplicaremos la propiedad de texto-superflujo con otras propiedades que ayudarán a hacer el texto con los ellipsis (...).

Cómo usar ellipsis de texto de texto en CSS?

El texto-superflujo de texto de la propiedad funciona en combinación con las otras propiedades en blanco con valor de valor, desbordamiento con valor oculto:

White-Space: Nowrap;
desbordamiento: oculto;
Texto-Overflow: Ellipsis;

La descripción de las propiedades se menciona a continuación:

• "espacio blanco"Propiedad con el valor"nower"Se utiliza para ajustar el texto en línea recta.
• "Desbordamiento"Propiedad con el valor"oculto"Se utiliza para ocultar el texto de desbordamiento.
• "texto de texto"Propiedad con el valor"elipsis"Se utiliza para convertir el texto en un ellipsis.

Producción

Eso es todo! Hemos aprendido con éxito por qué las las ellipsis de texto de texto de CSS no funcionan y cómo solucionarlo.

Conclusión

En CSS, a la propiedad de texto-upramento se le puede asignar el valor elipsis. Pero no funcionará solo. El ellipsis funciona en el elemento en el que se encuentra el ancho "píxeles", La propiedad del espacio blanco debe especificarse como"nower", Y el valor de la propiedad de desbordamiento como"oculto". Este artículo ha demostrado cómo funciona la propiedad CSS Text-Overflow con el Value Ellipsis y proporcionó un ejemplo relevante.