Estoy haciendo un sitio web receptivo para la escuela y mi pregunta es:

¿Cómo configuro una longitud máxima de caracteres de las oraciones (con CSS) en mi sitio web (como 75 caracteres) para que cuando tenga una pantalla muy grande, las oraciones no superen los 75 caracteres?

He intentado un ancho máximo pero eso arruina mi diseño. Estoy usando flexbox y consultas de medios para que responda.

Siempre puede usar un método truncado estableciendo un max-widthdesbordamiento ellipsiscomo este

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

Un ejemplo: http://jsfiddle.net/3czeyznf/

Para un truncamiento de varias líneas, eche un vistazo a una flexsolución. Un ejemplo con truncamiento en 3 filas.

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

Un ejemplo: https://codepen.io/srekoble/pen/EgmyxV

Hay un 'valor de longitud' CSS de ch.

De MDN

Esta unidad representa el ancho, o más precisamente la medida de avance, del glifo '0' (cero, el carácter Unicode U + 0030) en la fuente del elemento.

Esto puede aproximarse a lo que buscas.

p {
  overflow: hidden;
  max-width: 75ch;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt rem odit quis quaerat. In dolorem praesentium velit ea esse consequuntur cum fugit sequi voluptas ut possimus voluptatibus deserunt nisi eveniet!Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Dolorem voluptates vel dolorum autem ex repudiandae iste quasi. Minima explicabo qui necessitatibus porro nihil aliquid deleniti ullam repudiandae dolores corrupti eaque.</p>

Intente esto para truncar caracteres después de configurarlo en max-width. He usado 75ch en este caso

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75ch;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis etc.</p>

Para truncamiento multilínea, siga el enlace.

Un ejemplo: https://codepen.io/srekoble/pen/EgmyxV

Usaremos webkit css para esto. En resumen, WebKit es un motor de representación de navegador web HTML / CSS para Safari / Chrome. Esto puede ser específico del navegador ya que cada navegador está respaldado por un motor de representación para dibujar la página web HTML / CSS.

código de ejemplo:

.limited-text{
    white-space: nowrap;
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
}

<p class="limited-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>

    

Con Chrome puede establecer el número de líneas que se muestran con " -webkit-line-clamp ":

     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;  /* Number of lines displayed before it truncate */
     overflow: hidden;

Entonces para mí es usar en una extensión para que sea perfecto, más información aquí: https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up -broken-865413f16e5

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

HTML

<div id="dash">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a urna ac
quam.</p>
</div>

jQuery

var p = $('#dash p');
var ks = $('#dash').height();
while ($(p).outerHeight() > ks) {
  $(p).text(function(index, text) {
    return text.replace(/\W*\s(\S)*$/, '...');
  });
}

CSS

#dash {
  width: 400px;
  height: 60px;
  overflow: hidden;
}

#dash p {
  padding: 10px;
  margin: 0;
}

RESULTADO

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et ...

Jsfiddle

Solución CSS pura para truncar caracteres de varias líneas

Tuve un problema similar y encontré esta excelente solución única de CSS de Hackingui.com . Puede leer el artículo para obtener información, pero a continuación se muestra el código principal.

Lo probé y funciona perfectamente. Esperemos que alguien lo encuentre útil antes de optar por JS o las opciones del lado del servidor

  /* styles for '...' */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em; 
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;  
  /* place for '...' */
  margin-right: -1em;
  padding-right: 1em;
}

/* create the ... */
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}

/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}

Modern CSS Grid Answer

Ver el código completamente funcional en CodePen . Dado el siguiente HTML:

<div class="container">
    <p>Several paragraphs of text...</p>
</div>

Puede usar CSS Grid para crear tres columnas y decirle al contenedor que tome un ancho máximo de 70 caracteres para la columna central que contiene nuestro párrafo.

.container
{
  display: grid;
  grid-template-columns: 1fr, 70ch 1fr;
}

p {
  grid-column: 2 / 3;
}

Esto es lo que parece (Checkout CodePen para un ejemplo completamente funcional):

Aquí hay otro ejemplo en el que puede usar minmax para establecer un rango de valores. En pantallas pequeñas, el ancho se establecerá en 50 caracteres de ancho y en pantallas grandes tendrá 70 caracteres de ancho.

.container
{
  display: grid;
  grid-template-columns: 1fr minmax(50ch, 70ch) 1fr;
}

p {
  grid-column: 2 / 3;
}

Esta publicación es para una solución CSS, pero la publicación es bastante antigua, por lo que en caso de que otros tropiecen con esto y estén utilizando un marco JS moderno como Angular 4+, hay una manera simple de hacerlo a través de Angular Pipes sin tener que perder el tiempo con CSS.

Probablemente también haya formas de "Reaccionar" o "Vue" para hacerlo. Esto es solo para mostrar cómo se podría hacer dentro de un marco.

truncate-text.pipe.ts

/**
 * Helper to truncate text using JS in view only.
 *
 * This is pretty difficult to do reliably with CSS, especially when there are
 * multiple lines.
 *
 * Example: {{ value | truncateText:maxLength }} or {{ value | truncateText:45 }}
 *
 * If maxLength is not provided, the value will be returned without any truncating. If the
 * text is shorter than the maxLength, the text will be returned untouched. If the text is greater
 * than the maxLength, the text will be returned with 3 characters less than the max length plus
 * some ellipsis at the end to indicate truncation.
 *
 * For example: some really long text I won't bother writing it all ha...
 */
@Pipe({ name: 'truncateText' })
export class TruncateTextPipe implements PipeTransform {
  transform(value: string, ...args: any[]): any {
    const maxLength = args[0]
    const maxLengthNotProvided = !maxLength
    const isShorterThanMaximumLength = value.length < maxLength
    if (maxLengthNotProvided || isShorterThanMaximumLength) {
      return value
    }
    const shortenedString = value.substr(0, maxLength - 3)
    return `${shortenedString}...`
  }
}

app.component.html

<h1>{{ application.name | truncateText:45 }}</h1>

Prueba mi solución con 2 formas diferentes.

<div class="wrapper">
      <p class="demo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

<div class="wrapper">
  <p class="demo-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut odio temporibus voluptas error distinctio hic quae corrupti vero doloribus optio! Inventore ex quaerat modi blanditiis soluta maiores illum, ab velit.</p>
</div>

.wrapper {
  padding: 20px;
  background: #eaeaea;
  max-width: 400px;
  margin: 50px auto;
}

.demo-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.demo-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
}