Sto realizzando un sito web reattivo per la scuola e la mia domanda è:

Come faccio a impostare una lunghezza massima dei caratteri delle frasi (con CSS) sul mio sito Web (come 75 caratteri) che quando ho uno schermo molto grande, le frasi non supereranno i 75 caratteri.

Ho provato una larghezza massima ma questo rovina il mio layout. Sto usando query flexbox e media per renderlo reattivo.

È sempre possibile utilizzare un metodo troncato impostando a max-widthe overflow in ellipsisquesto modo

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

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

Per un troncamento su più righe, dai un'occhiata a una flexsoluzione. Un esempio con troncamento su 3 file.

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

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

Esiste un "valore di lunghezza" CSS di ch.

Da MDN

Questa unità rappresenta la larghezza, o più precisamente la misura di avanzamento, del glifo '0' (zero, il carattere Unicode U + 0030) nel carattere dell'elemento.

Questo può approssimare ciò che stai cercando.

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>

Prova questo per troncare i caratteri dopo averlo impostato su larghezza massima. Ho usato 75 canali in questo 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>

Per il troncamento multilinea, seguire il collegamento.

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

Per questo useremo webkit css. In breve WebKit è un motore di rendering per browser Web HTML / CSS per Safari / Chrome. Ciò può essere specifico per il browser poiché ogni browser è supportato da un motore di rendering per disegnare la pagina Web HTML / CSS.

codice di esempio:

.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 puoi impostare il numero di righe visualizzate con " -webkit-line-clamp ":

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

Quindi per me è da usare in un'estensione quindi è perfetto, maggiori informazioni qui: https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up -broken-865413f16e5

Questo non è possibile con i CSS, dovrai usare Javascript per quello. Sebbene sia possibile impostare la larghezza di p su un massimo di 30 caratteri e le lettere successive scenderanno automaticamente, ma di nuovo questo non sarà così preciso e varierà se i caratteri sono in maiuscolo.

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;
}

RISULTATO

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

Jsfiddle

Pura soluzione CSS per troncare i caratteri multi linea

Ho avuto un problema simile e ho trovato questa eccellente soluzione css solo su Hackingui.com . Puoi leggere l'articolo per informazioni ma di seguito è riportato il codice principale.

L'ho provato e funziona perfettamente. Speriamo che qualcuno lo trovi utile prima di optare per le opzioni lato server o JS

  /* 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;
}

Risposta alla griglia CSS moderna

Visualizza il codice completamente funzionante su CodePen . Dato il seguente HTML:

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

È possibile utilizzare la griglia CSS per creare tre colonne e indicare al contenitore di assumere una larghezza massima di 70 caratteri per la colonna centrale che contiene il nostro paragrafo.

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

p {
  grid-column: 2 / 3;
}

Ecco come appare (Checkout CodePen per un esempio pienamente funzionante):

Ecco un altro esempio in cui è possibile utilizzare minmax per impostare un intervallo di valori. Su schermi piccoli la larghezza sarà impostata su una larghezza di 50 caratteri e su schermi grandi sarà larga 70 caratteri.

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

p {
  grid-column: 2 / 3;
}

Questo post è per una soluzione CSS, ma il post è piuttosto vecchio, quindi nel caso in cui gli altri si imbattano in questo e stiano usando un moderno framework JS come Angular 4+, c'è un modo semplice per farlo attraverso Angular Pipes senza dover pasticciare con i CSS.

Probabilmente ci sono anche modi "React" o "Vue" per farlo. Questo è solo per mostrare come potrebbe essere fatto all'interno di un framework.

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

Prova la mia soluzione in 2 modi diversi.

<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;
}