web-dev-qa-db-fra.com

Définition d'une longueur maximale de caractères en css

Je crée un site web responsive pour l'école et ma question est la suivante:

Comment définir une longueur maximale de caractères des phrases (avec CSS) sur mon site Web (environ 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 mediaqueries pour le rendre réactif. 

htmlcsshtml5css3text
120
Sharif1111

Vous pouvez toujours utiliser une méthode tronquée en définissant un max-width et un dépassement Ellipsis comme ceci

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

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

Pour une troncature sur plusieurs lignes, jetez un coup d'œil à la solution flex. Un exemple avec la 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

185
Vangel Tzo

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

De MDN

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

Cela peut correspondre à 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>

76
Paulie_D

Essayez ceci pour tronquer des caractères après l’avoir réglé 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 une troncation multiligne, suivez le lien.

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

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

30
V K Singh

exemple de code:

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

10
Hossein Jafari

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&EACUTE;SULTAT

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

Jsfiddle

3
imtaher

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, il s’agit d’une extension parfaite, c’est parfait, plus d’informations ici: https://medium.com/mofed/css-line-clamp-the-good-the-good-the-bad-and-the-straight -up-broken-865413f16e5

1
Khado Mikhal

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

1
Jean-Luc

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;
}
0
Super Model

Solution CSS pure pour tronquer des caractères multilignes

J'ai eu un problème similaire et j'ai trouvé cette excellente solution CSS uniquement à partir 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. J'espère que quelqu'un trouvera cela utile avant d'opter pour JS ou les options 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;
}
0
Benny Thadikaran

Réponse de la grille CSS moderne

Voir le code de travail complet sur CodePen . Étant donné le 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 ça ressemble (Checkout CodePen pour un exemple pleinement fonctionnel):

 enter image description here

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

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

p {
  grid-column: 2 / 3;
}
0
Muhammad Rehan Saeed