with - ¿Cómo restringir el límite de caracteres por línea o el número de caracteres con css?

text-overflow ellipsis not working

Question

¿Hay alguna propiedad CSS que pueda hacer una de las siguientes? Pero primero, déjame explicarte.

Imagine un diseño de mampostería donde cada elemento tiene un ancho: 200px; y cada uno sería altura: 250px; (esto es solo un ejemplo).

En cada elemento, hay una miniatura y un enlace, y muchas veces, este enlace se ajusta a 2-3 líneas, y por lo tanto hace que la altura de cada elemento sea diferente.

¿Hay alguna manera de establecer un número máximo de caracteres dentro de una clase o cortar el ajuste después de un cierto número de líneas? Y tal vez incluso agregar algún efecto CSS para insertar contenido: "..."; antes del final de la línea para mostrar que fue cortado?

Cualquier ayuda es apreciada.

Gracias.

Answer 1

No son caracteres, pero puede establecer el ancho de un elemento en píxeles y usar la propiedad de desbordamiento de texto que debe agregar "...".

Además, puede limitar el número de líneas estableciendo la altura de un elemento, por ejemplo, 30px y estableciendo la propiedad de CSS de altura de línea en 15px y agregando el overflow:hidden . De esta manera tendrá exactamente dos líneas de texto.

.twoLines{
   height:30px;
   line-height:15px;
   overflow:hidden;
}

Answer 2

Puede intentar text-overflow , sin embargo, tiene algunas restricciones, pero aún le puede encajar:

Ejemplo

<div id="container">
    This is some short content to demonstrate the css-property
    text-overflow
</div>​

#container{
    width:100px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;   
}​