Estou criando um site responsivo para a escola e minha pergunta é:

Como defino um comprimento máximo de caracteres das frases (com CSS) no meu site (como 75 caracteres) que, quando tenho uma tela muito grande, as frases não ultrapassam 75 caracteres.

Eu tentei uma largura máxima, mas isso atrapalha meu layout. Estou usando consultas flexbox e de mídia para torná-lo responsivo.

Você sempre pode usar um método truncado definindo a max-widthe overflow ellipsiscomo este

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

Um exemplo: http://jsfiddle.net/3czeyznf/

Para um truncamento de várias linhas, consulte uma flexsolução. Um exemplo com truncamento em 3 linhas.

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

Um exemplo: https://codepen.io/srekoble/pen/EgmyxV

Existe um 'valor de comprimento' CSS de ch.

Do MDN

Esta unidade representa a largura, ou mais precisamente, a medida de avanço, do glifo '0' (zero, o caractere Unicode U + 0030) na fonte do elemento.

Isso pode se aproximar do que você procura.

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>

Tente isso para truncar caracteres depois de configurá-lo para largura máxima. Eu usei 75ch neste 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 truncamento de múltiplas linhas, siga o link.

Um exemplo: https://codepen.io/srekoble/pen/EgmyxV

Usaremos o webkit css para isso. Em resumo, o WebKit é um mecanismo de renderização de navegador de HTML / CSS para Safari / Chrome. Isso pode ser mais específico, pois todo navegador é suportado por um mecanismo de renderização para desenhar a página da web HTML / CSS.

código de exemplo:

.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>

    

Com o Chrome, você pode definir o número de linhas exibidas com " -webkit-line-clamp ":

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

Então, para mim, é usar em uma extensão para que seja perfeita, mais informações aqui: https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up -broken-865413f16e5

Isso não é possível com CSS, você terá que usar o Javascript para isso. Embora você possa definir a largura de p em até 30 caracteres, as próximas letras diminuirão automaticamente, mas novamente isso não será tão preciso e variará se os caracteres estiverem em maiú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 sente-se no meio, consectetur elip adipiscing. Proin nisi ligula, dapibus a volutpat sit amet, mattis et ...

Jsfiddle

Solução CSS pura para truncar caracteres de várias linhas

Eu tive um problema semelhante e encontrei esta excelente solução única de CSS no Hackingui.com . Você pode ler o artigo para obter informações, mas abaixo está o código principal.

Eu testei e funciona perfeitamente. Espero que alguém ache útil antes de optar por opções de JS ou do 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;
}

Resposta da grade CSS moderna

Veja o código completo do CodePen . Dado o seguinte HTML:

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

Você pode usar o CSS Grid para criar três colunas e dizer ao contêiner para ter uma largura máxima de 70 caracteres para a coluna do meio que contém nosso parágrafo.

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

p {
  grid-column: 2 / 3;
}

É assim que parece (Checkout CodePen para um exemplo completo):

Aqui está outro exemplo em que você pode usar minmax para definir um intervalo de valores. Em telas pequenas, a largura será definida para 50 caracteres de largura e, em telas grandes, terá 70 caracteres de largura.

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

p {
  grid-column: 2 / 3;
}

Este post é para uma solução CSS, mas o post é bastante antigo, portanto, caso outras pessoas se deparem com isso e estejam usando uma estrutura JS moderna, como o Angular 4+, existe uma maneira simples de fazer isso através dos Tubos Angulares sem precisar mexer com CSS.

Provavelmente, também existem maneiras de "reagir" ou "vue". Isso é apenas para mostrar como isso pode ser feito dentro de uma estrutura.

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>

Experimente minha solução com 2 maneiras 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;
}