web-dev-qa-db-fra.com

Comment définir le débordement de texte sur Ellipsis dans la présentation de grille CSS?

J'ai une disposition en grille semblable à celle de header ci-dessous. Il y a un texte dans la div dont la largeur est 1fr. Je veux que le texte à l'intérieur de cette div soit tronqué quand il est trop long. L'ajout de text-overflow en tant que ellpsis ne fonctionne pas. Une idée comment le faire?

Ce doit être une grille et je ne peux absolument pas changer cela.

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  display: flex;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

content {
  flex: 1;
  background-color: red;
}

header {
  background-color: limegreen;
  display: grid;
  grid-template-columns: 0fr 1fr 0fr;
}

header div {
  border: 1px solid orange;
}

.long {
  text-overflow: Ellipsis;
}
<div class="container">
  <header>
    <div>Left</div>
    <div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>Right</div>
  </header>
  <content>
  </content>
</div>

csscss3css-grid
8
nullDev

changer le fichier .long en bas

.long {
    text-overflow: Ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

la raison pour laquelle vous devez ajouter du blanc et du trop-plein est la suivante:

  1. vous avez besoin de white-space: nowrap pour dire aux navigateurs de ne pas utiliser de texte renvoyé à la ligne lorsque la longueur du texte dépasse la largeur du bloc; la valeur par défaut de white-space est normale, ce qui indique qu'il peut être renvoyé à la ligne, de sorte qu'il n'y aura pas de débordement du texte;
  2. La valeur par défaut overflow est visible. Lorsque le texte dépasse le bloc contenant, il ne fait que s'afficher. Il n'est donc pas nécessaire de dépasser le texte à afficher, uniquement si vous définissez overflow à hidden. Ensuite, lorsque le texte ne peut pas être entièrement affiché, il utilisera la propriété text-overflow.
5
Luckness

Ajoutez overflow: hidden et white-space: nowrap lorsque vous avez utilisé text-overflow

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  display: flex;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

content {
  flex: 1;
  background-color: red;
}

header {
  background-color: limegreen;
  display: grid;
  grid-template-columns: 0fr 1fr 0fr;
}

header div {
  border: 1px solid orange;
}

.long {
  text-overflow: Ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<div class="container">
  <header>
    <div>Left</div>
    <div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>Right</div>
  </header>
  <content>
  </content>
</div>

3
Minal Chauhan

1) quand utiliser text-overflow: Ellipsis; doit aussi utiliser overflow: hidden;.

2) white-space: nowrap; Ne permet pas la rupture de texte dans la nouvelle ligne.

Alors, change comme ça: 

.long {
  text-overflow: Ellipsis;
  overflow: hidden;/*/<------------new/*/
  white-space: nowrap;/*/<---------new/*/
}
2
Ehsan

Définissez une hauteur, définissez white-space sur nowrap et overflow: hidden

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  display: flex;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

content {
  flex: 1;
  background-color: red;
}

header {
  background-color: limegreen;
  display: grid;
  grid-template-columns: 0fr 1fr 0fr;
}

header div {
  border: 1px solid orange;
}

.long {
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: Ellipsis;
}
<div class="container">
  <header>
    <div>Left</div>
    <div class="long">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>Right</div>
  </header>
  <content>
  </content>
</div>

0
dennispreston