Je crée un site Web réactif pour l'école et ma question est:

Comment définir une longueur maximale de caractères des phrases (avec CSS) sur mon site Web (comme 75 caractères) pour que, lorsque j'ai un très grand écran, les phrases ne dépassent pas 75 caractères.

J'ai essayé une largeur maximale mais cela gâche ma mise en page. J'utilise flexbox et les requêtes multimédias pour le rendre réactif.

Vous pouvez toujours utiliser une méthode tronquée en définissant un max-widthet un débordement ellipsiscomme celui-ci

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

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

Pour une troncature multi-lignes, regardez une flexsolution. Un exemple avec troncature sur 3 lignes.

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

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

Il existe une «valeur de longueur» CSS de ch.

De MDN

Cette unité représente la largeur, ou plus précisément la mesure d'avance, du glyphe '0' (zéro, le caractère Unicode U + 0030) dans la police de l'élément.

Cela peut se rapprocher de ce que vous recherchez.

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>

Essayez ceci pour tronquer les caractères après l'avoir défini sur max-width. J'ai utilisé 75ch dans ce cas

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>

Pour la troncature multiligne, veuillez suivre le lien.

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

Nous utiliserons webkit css pour cela. En bref, WebKit est un moteur de rendu de navigateur Web HTML / CSS pour Safari / Chrome. Cela peut être spécifique au navigateur car chaque navigateur est soutenu par un moteur de rendu pour dessiner la page Web HTML / CSS.

code d'exemple:

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

    

Avec Chrome, vous pouvez définir le nombre de lignes affichées avec " -webkit-line-clamp ":

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

Donc pour moi c'est à utiliser dans une extension donc c'est parfait, plus d'informations ici: https://medium.com/mofed/css-line-clamp-the-good-the-bad-and-the-straight-up -breaké-865413f16e5

Ce n'est pas possible avec CSS, vous devrez utiliser le Javascript pour cela. Bien que vous puissiez définir la largeur du p jusqu'à 30 caractères, les lettres suivantes tomberont automatiquement, mais encore une fois, ce ne sera pas aussi précis et variera si les caractères sont en majuscules.

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

RÉSULTAT

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

Jsfiddle

Solution CSS pure pour tronquer les caractères multi-lignes

J'ai eu un problème similaire et j'ai trouvé cette excellente solution css uniquement de Hackingui.com . Vous pouvez lire l'article pour plus d'informations mais vous trouverez ci-dessous le code principal.

Je l'ai testé et cela fonctionne parfaitement. Espérons que quelqu'un le trouve utile avant d'opter pour les options JS ou côté serveur

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

Réponse de grille CSS moderne

Affichez le code entièrement fonctionnel sur CodePen . Compte tenu du code HTML suivant:

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

Vous pouvez utiliser CSS Grid pour créer trois colonnes et indiquer au conteneur de prendre une largeur maximale de 70 caractères pour la colonne du milieu qui contient notre paragraphe.

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

p {
  grid-column: 2 / 3;
}

Voici à quoi cela ressemble (Checkout CodePen pour un exemple pleinement fonctionnel):

Voici un autre exemple où vous pouvez utiliser minmax pour définir une plage de valeurs. Sur les petits écrans, la largeur sera fixée à 50 caractères de large et sur les grands écrans, elle sera de 70 caractères.

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

p {
  grid-column: 2 / 3;
}

Ce message est pour une solution CSS, mais le message est assez ancien, donc juste au cas où d'autres trébucheraient dessus et utiliseraient un framework JS moderne tel que Angular 4+, il existe un moyen simple de le faire via Angular Pipes sans avoir à le faire. déconner avec CSS.

Il existe probablement des moyens "React" ou "Vue" de faire cela aussi. C'est juste pour montrer comment cela pourrait être fait dans un cadre.

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>

Essayez ma solution de 2 manières différentes.

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