Breadcrumbs break into 2 lines on small screens

Breadcrumb navigation can greatly enhance the way users find their way around a site, they should be helpful in letting the user know where they are are in the structure of your site.

Problem is sometimes if you have a long name in your breadcrumb it can break into 2 lines as the image below shows.

<!doctype html>
<meta charset="utf-8">
<title>Untitled Document</title>
  <link href="css/bootstrapv4.1.3.css" rel="stylesheet" type="text/css"> 
    <link href="css/style.css" rel="stylesheet" type="text/css"> 

     <nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Next Level</a></li>
    <li class="breadcrumb-item active" aria-current="page"><a href="/" title="Im a really long name and will break">Im a really long name and will break</a></li>
	<h1>Example for keeping breadcrumbs on same line</h1>
    <script src="js/jQueryv3.3.1.js" type="text/javascript"></script>
    <script src="js/bootstrapv4.1.3.js" type="text/javascript"></script>

CSS Code

Now when we run the code again, we can see that the breadcrumbs no longer break into 2 lines as the image below shows.

/* CSS Document */
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  h1 {
    font-size: 0.9em;
    text-align: center; }

  .breadcrumb {
    display: block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }

  .breadcrumb .breadcrumb-item {
    display: inline; } }

/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
  h1 {
    font-size: 1.1em;
    text-align: left; } }

Blog Form

 Please complete the required fields (*required)