Fil d'Ariane - Retour à la ligne - Smartphone

**senacle** · 24/08/2023, 16h46

J'ai ce fil d'Ariane

Home > News > Long title of the news that goes on other line

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<nav aria-label="Fil d'ariane" class="breadcrumb">
    <ol>
        <li>
            <a class="mdi mdi-home" href="https://google" id="ariane_n1">Google</a>
        </li>
        <li>
            <a href="https://google/news">News</a>
        </li>
        <li>
            <a href="https://google/news/7357"><span aria-current="page" class="ariane_courant">Long title of the news that goes on other line</span></a>
        </li>
    </ol>
</nav>

Avec ce style

Code :

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
.breadcrumb {
    background-color: white;
    border-radius: unset;
    margin: .3rem 0 .5rem 0;
    padding: 0;
    display: flex; <== bootstrap
    flex-wrap: wrap; <== bootstrap
    list-style: none; <== bootstrap
}
.breadcrumb ol {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumb li::before {
	content: "›";
	padding: 0px 0px 0px 0.25rem;
}
.breadcrumb li:first-child::before {
	content: "";
}

Sur smartphone, il est affiché comme ceci, avec un retour à la ligne si le texte est trop long pour l'un des éléments :
Home > News
> Long title of the news that goes on other line

Je voudrais qu'il soit affiché en prenant toute la largeur, par exemple :
Home > News > Long title of the
news that goes on other line

**Archimède** · 25/08/2023, 15h48

Pour un site responsive sur smartphone, il faut contrôler la taille de ta police de caractères à l'aide des media queries...

Code :

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

1
2
3
4
5
@media screen and (max-width: 480px) {
  nav {
   font-size: 12px;
 }
}

Par exemple. Je n'ai pas testé...mais c'est l'orientation qu'il faut prendre.

**senacle** · 29/08/2023, 15h33

J'utilise bien les media query.
Même en changeant la taille de la police, si le texte du fil d'Ariane est très long, on aura toujours cet effet de saut de ligne.

**Archimède** · 29/08/2023, 17h57

Après tu dimensionnes ta police en unités viewport. Pour toi, en vw mais si ton texte est vraiment trop long, il va falloir une très petite valeur et le rendu sera très moche... (toute petite police sur portable et ce ne sera pas du tout confortable et élégant). Il faudra obliger tes visiteurs à mettre leur smartphone en landscape...

**senacle** · 04/09/2023, 10h08

Voici un exemple qui fonctionne

Code :

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
.breadcrumb {
    background-color: white;
    border-radius: unset;
    margin: .3rem 0 .5rem 0;
    padding: 0;
    display: flex; <== bootstrap
    flex-wrap: wrap; <== bootstrap
    list-style: none; <== bootstrap
}
.breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0.25rem;
}
.breadcrumb li {
    display: inline;
}
.breadcrumb li + li::before {
    content: "›";
}

Code html :

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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About | </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="./css/about.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="width:300px">
    <nav aria-label="Fil d'ariane" class="breadcrumb">
    <ol>
        <li>
            <a class="mdi mdi-home" href="https://google" id="ariane_n1">Google</a>
        </li>
        <li>
            <a href="https://google/news">News</a>
        </li>
        <li>
            <a href="https://google/news/7357"><span aria-current="page" class="ariane_courant">Long title of the news that goes on other line</span></a>
        </li>
    </ol>
</nav>
</html>