html - with - Limitando el número de caracteres por línea con CSS

truncar texto con puntos suspensivos

Question

Tengo un párrafo de texto:

<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>

¿Cómo puedo asegurarme de que no se muestren más de 30 caracteres en una línea con CSS?

Answer 1

Dependiendo de la fuente que esté utilizando, puede establecer max-width en el párrafo con un valor calculado. No será exacto, pero he encontrado que en la mayoría de los casos eso no importa.

p {
  max-width: calc(30em * 0.5);
}

El número con el que se multiplica depende de la fuente y de la cantidad de caracteres que ocupa un cuadrado cuadrado. Más caracteres = menos precisos.

Answer 2

Eso no es posible con CSS, tendrá que usar el Javascript para eso. Aunque puede establecer el ancho de la p hasta 30 caracteres y las siguientes letras bajarán automáticamente, pero nuevamente esto no será tan preciso y variará si los caracteres están en mayúscula.

Answer 3

La última manera de hacerlo es usar la unidad ''ch'' que significa carácter.

Usted puede simplemente escribir:

p { max-width: 75ch; }

El único truco es que los espacios en blanco no se contarán como caracteres.

Consulte también esta publicación: https://.com/a/26975271/4069992

Answer 4

Otro enfoque para esto sería poner un elemento span con una pantalla: estilo de bloque dentro del elemento p cada vez que necesite romper el contenido. Solo sería útil cuando el contenido de tu p es estático.

<p>this is a not-dynamic text and I want to put<span style="display:block">the following words in the next line</span>and these other words in a third one</p>

Sería de salida:

Este es un texto no dinámico y quiero poner.

las siguientes palabras en la siguiente linea

Y estos otros en un tercero.

Esto le permite cambiar sus saltos de línea de texto en diferentes vistas sin JS.

Answer 5

Podrías hacer esto:
(¡ Nota ! Esto es CSS3 y el soporte del navegador = bueno !!)

   p {
    text-overflow: ellipsis; /* will make [...] at the end */
    width: 370px; /* change to your preferences */
    white-space: nowrap; /* paragraph to one line */
    overflow:hidden; /* older browsers */
    }

Answer 6

Si usa CSS para seleccionar una fuente monoespaciada, el problema de variar la longitud de los caracteres se resuelve fácilmente.

Answer 7

Una mejor solución sería usar el estilo css, el comando para romper líneas. Funciona en versiones anteriores de navegadores.

p {
word-wrap: break-word;
}