I've this breadcrumb
Home > News > Long title of the news that goes on other line
<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>
With this css
.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: "";
}
On small screen like smartphone, the breadcrumb is displayed like :
Home > News
> Long title of the news that goes on other line
I would like it is displayed on full width, with a line return at the end of the screen :
Home > News > Long title of the
news that goes on other line
I got rid of using flex on the ol, made the li elements be inline and tweaked the padding.
.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: "›";
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About | </title>
<!-- <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> -->
<!-- <link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" /> -->
<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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- <link rel="stylesheet" href="/css/index.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>
<!-- <script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></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>