Discussion :

[Xt0ff]

Bonjour,

Comme indiqué en intitulé, je cherche à abréger un texte s'il dépasse du conteneur et mettre 3 points de suspension en fin de ligne.
Il m'a semblé que cela se faisait par

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

text-overflow: ellipsis;

et qu'il fallait aussi utiliser avec cette propriété

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
white-space: nowrap;
overflow: hidden;

Ca paraissait simple, pourtant je n'arrive pas à mettre cela en pratique.
Je vous mets 2 captures d'écran:


Est-ce que vous verriez ce qui cloche?

Si vous souhaitez le code complet, il se trouve sur github à l'adresse https://github.com/christophe-simon/ohmyfood sur la branche transitions.

En résumé, on a ceci:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
.menu-item {
    display: flex;
    margin-bottom: 20px;
    border-radius: 20px;
    padding: 20px;
    background-color: $color-background-main-secondary;
    box-shadow: 1px 1px 8px $shadow-color;
    overflow: hidden;
    &:hover {
        cursor: pointer;
        > .menu-item__checked {
            width: 60px;
            transform: scaleX(1);
            i {
                transform: rotate(0deg) translateX(0);
            }
        }
    }
    &__description {
        flex: 1;
        > div {
            display: flex;
        }
        &__name {
            font-family: 'Roboto', sans-serif;
            margin: 0 0 14px 0;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        &__additional-information {
            margin: 0;
            flex: 1;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        &__price {
            margin: 0;
            width: 30px;
            text-align: right;
            font-weight: bold;
        }
    }
    &__checked {
        display:flex;
        align-items:center;
        justify-content:center;
        width: 0;
        background-color: $color-tertiary;
        color: $color-background-main-primary;
        margin: -20px -20px -20px 20px;
        border-radius: 0 20px 20px 0;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform 700ms ease-in-out;
        i {
            display: inline-block;
            font-size: nth($font-size, 2);
            transform: rotate(-90deg) translateX(60px);
            transition: transform 700ms ease-in-out;
        }
    }
}

Sur la capture d'écran numéro 1, on a le texte de .menu-item__description__additional-information qui va à la ligne automatiquement.
L'affichage est bon, sauf qu'on veut qu'une seule ligne.
On ajoute donc nos 3 lignes de code... et là, on ne va plus à la ligne, du fait de la propriété white-space: nowrap;...
On ne dépasse pas du conteneur du fait de overflow: hidden;
Mais cependant le conteneur augmente de taille et on ne met jamais les "..." (capture 2)

Est-ce que vous verriez ce qui cloche dans mon code? ... pourquoi le contenteur .menu-item__description__additional-information augmente désormais de taille?


-----------------------------------
Edit:

Ok... On m'a donné la solution sur discord...
Apparemment un bloc qui pousse un autre a besoin de connaitre la taille du bloc qu'il pousse.
Du coup il faut mettre par exemple

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

min-width: 2rem;

au bloc .menu-item__description

Problème solutionné!

[Gaulouis]

Salut,

text-overflow: ellipsis; semble ne pas fonctionner avec un display: flex;En utilisant display:inline-block; ca semble fonctionner.

Cdlt,