CSS3 desbordamiento de texto (Text Overflow)

CSS3nuevas propiedades de texto en CSS pueden proporcionar más especificaciones sobre la presentación del texto.

en CSS3manejo de texto sobrante

CSS3se han introducido varias nuevas propiedades para modificar el contenido del texto, pero algunas de estas propiedades han existido durante mucho tiempo. Estas propiedades le permiten especificar con precisión la presentación del texto en el navegador web.

ocultar texto sobrante

por ejemplo, si se oculta el texto sobrante del elementowhite-spacesi el valor del atributo se establece en nowrap o si una palabra es demasiado larga y no se puede contener en una dirección de correo electrónico más larga, puede causar que el texto se sobrepase (por ejemplo, prohibiendo que se salte de línea). En este caso, se puede usar CSS3 texto-overflowpropiedad para determinar la forma de visualización del contenido del texto sobrante.

Puede mostrar o cortar el texto sobrante, o cortar y mostrar en el palace del texto cortado puntos suspensivos o una cadena personalizada, para indicar al usuario.

La propiedad word-El atributo 'break' acepta los valores: clip, ellipsis,string.

p {
　　　　ancho:　400px;
　　　　overflow: hidden;
　　　　white-space: nowrap;
　　　　background: #cdcdcd;
}
p.cortada {}}
　　　　texto-overflow: cortar;　/*　cortar el texto que se sale　*/
}
p.elipsis {
　　　　texto-overflow: elipsis;　/*　display39;…' para representar texto cortado　*/
}

rompe el texto que se sale

También puede usar CSS3 word-romperrompe una palabra larga y la hace salta de línea para que el límite del elemento contenedor se sobrepase.

La propiedad word-Los valores aceptados por la propiedad wrap son: normal y romper-romper.

p {
　　　　ancho:　200px;
　　　　background: #ffc4ff;
　　　　word-mantener: romper-word;
}

especificar las reglas de salto de línea del texto

También puede usar CSS3 word-romperLa propiedad se especifica automáticamente las reglas de salto de línea del texto (es decir, cómo hacer salto de línea en las palabras).

A través de valores aceptables word-La propiedad break es: normal, romper-todo y mantener-todo.

p {
　　　　ancho:　150px;
　　　　margen:　10px;
}
p.romper {
　　　　background: #bedb8b;
　　　　word-break: romper-all;
}
p.mantener {
　　　　background: #f09bbb;
　　　　word-break: mantener-all;
}