Avoid inserting line breaks in Bootstrap4-alpha6 breadcrumb components

When the text in the breadcrumbs within Bootstrap4-aplha6 becomes too lengthy, the last crumb will move to the next line:

<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">Home</a>
  <a class="breadcrumb-item" href="#">Library</a>
  <a class="breadcrumb-item" href="#">Data</a>
  <span class="breadcrumb-item active">A title that is slightly too long</span>
</nav>

Results in:

 ---------------------------------
|                                 |
| Home / Library / Data           |
|   / A title that is slightly to…|
|                                 |
|                                 |
|                                 |
 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

However, I am looking for this layout instead:

 ---------------------------------
|                                 |
| Home / Library / Data / A titl… |
|                                 |
|                                 |
|                                 |
 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

I have attempted to address this using white-space: nowrap, overflow: hidden, and text-overflow: ellipsis. These solutions do not work effectively due to the breadcrumb-items being block elements floated left in Bootstrap4.

Has anyone discovered a way to resolve this issue without modifying all the Bootstrap classes (ellipsis functionality is not essential)?

twitter-bootstrapcssbootstrap-4twitter-bootstrap-4

Answer №1

Michael's approach no longer seems to be compatible with Bootstrap 4.1 when utilizing the official breadcrumb snippet (using <ol> and <li> tags). Here is an alternative solution.

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

.breadcrumb .breadcrumb-item {
    display: inline;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container">             
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item"><a href="#">My category</a></li>
                <li class="breadcrumb-item"><a href="#">My category</a></li>
                <li class="breadcrumb-item"><a href="#">My category</a></li>
                <li class="breadcrumb-item"><a href="#">My category</a></li>
                <li class="breadcrumb-item"><a href="#">My category</a></li>
                <li class="breadcrumb-item active" aria-current="page">My page</li>       
            </ol>
        </nav>        
    </div>

Answer №2

Ensure that the .breadcrumb-item does not float. Apply the style white-space: nowrap; to both .breadcrumb and .breadcrumb-item. Then, include 

overflow: hidden; text-overflow: ellipsis;
in the .breadcrumb class to create the ellipsis effect.

.breadcrumb, .breadcrumb-item {
  white-space: nowrap;
}
.breadcrumb .breadcrumb-item {
  float: none;
}
.breadcrumb {
  text-overflow: ellipsis;
  overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">Home</a>
  <a class="breadcrumb-item" href="#">asdf asdf asdf asdf asdf asdf a asdf asdf asdf asdf sadf</a>
  <a class="breadcrumb-item" href="#">Data</a>
  <span class="breadcrumb-item active">A slightly llllllitle</span>
</nav>

Answer №3

Implementing Bootstrap 4.1.3

To make sure the breadcrumb container does not wrap, add .flex-nowrap to the .breadcrumb element. Then apply .text-truncate to the .breadcrumb-item elements that you want to truncate the text for. This will ensure that each element fits within the container and truncates the text if it exceeds the space.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container m-5" style="width:450px">
  <nav class="breadcrumb flex-nowrap">
    <a class="breadcrumb-item">Home</a>
    <a class="breadcrumb-item text-truncate">Library</a>
    <a class="breadcrumb-item text-truncate">Data</a>
    <a class="breadcrumb-item text-truncate">Thursday</a>
    <span class="breadcrumb-item active text-truncate">A slightly too long title</span>
  </nav>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`Troubleshooting Sencha Touch 2 CSS Issues`

After generating a new CSS theme and processing it with compass, the styles remained unchanged. The website still appeared identical to the original default theme. How can this issue be resolved? ...

csssencha-touchsasssencha-touch-2compass-sass

Troubleshooting problem with displaying Font-awesome icons in Angular4 and Bootstrap4

Utilizing bootstrap4 to showcase the user icon on the signup page worked perfectly with @angular/cli v1.3.x. However, after upgrading to version @angular/cli v1.6.6, I encountered an issue. Below is the warning message that appears when running: ng serv ...

angularangular-clibootstrap-4

`Modifying CSS in Bootstrap 4 for a personalized website design`

I am currently building a Bootstrap website for my sister, but I am facing issues with changing the CSS. Most of the time, the changes do not seem to take effect. I created a new file called "style.css" to override the Bootstrap styles and placed it below ...

cssbootstrap-4

Keep label at the forefront once input field is completed

Is it possible to keep my label positioned on top of the input field even after filling in data? I attempted using the valid function in CSS, but did not achieve the desired functionality. .txt_field input { width: 100%; padding: 0 5px; height: 4 ...

htmlcss

Creating a sidebar that extends to the bottom of the webpage using

My friend is currently designing his website, and he has encountered an issue with the sidebar. He wishes for the sidebar to extend all the way down to the bottom of the page rather than just the visible portion within the browser window. You can view the ...

htmlcss

Arranging a Vertical Element Within a Rotated Holder

Who would have thought that geometry would come into play when working with CSS? I need help figuring out how to perfectly cover a rotated container with an upright background image. The goal is to hide the rotation on the sides and maintain dynamic contro ...

cssmathsassgeometry

Reactjs encountering issues loading css file

Currently, I am working on a project in Reactjs with Nextjs. To add CSS to my project, I have stored my CSS files in the 'styles' folder. In order to include them, I created a file called '_document.js' and implemented the following cod ...

javascriptcssreactjsnext.js

Tips for customizing the appearance of the React Native side menu

After successfully implementing a side menu using react native, I am now looking to style the image to match the design shown in the links below: Check out the application I developed I want it to look like this Is styling the key to achieving this desi ...

androidcssreact-nativestylesside-menu

Utilizing CSS/HTML to optimize code for mobile applications

Looking for some help with implementing the Upcoming Events part from this code snippet: https://codepen.io/AbhijithHebbarK/pen/boKWKE .events-details-list{ opacity:0; transition: all 0.3s ease-in-out; position: absolute; left: 0; rig ...

htmlcssmobile

Disable the upload functionality for the item in Bootstrap Fileinput

I'm having trouble removing the upload icon from the item box. My goal is to automatically upload all images when I click on the "send" button. Thank you https://i.sstatic.net/3rA4G.png var btns = '<input type="hidden" id= "<?= $csrf[&apo ...

jquerybootstrap-4

I want to use React Bootstrap and Next.js to retrieve the text from a textbox in a React Component and then send it back to my Index.js file. How can I accomplish this task?

I need some assistance. Currently, I am facing a challenge. I am trying to retrieve data from one of my React Components named ParameterList. This component contains a React-Bootstrap Form.Control element for numerical input. My goal is to take the value ...

javascriptreactjsbootstrap-4next.jsreact-bootstrap

Tips for ensuring a div stays centered while resizing the window

When I resize the window, the div tab on the right side of the screen moves to the bottom right. How can I make it stay in the middle regardless of screen size? I've tried using margin-left:auto and margin-right:auto but it didn't work. Changing ...

javascripthtmlcss

Python: parsing comments in a cascading style sheet document

I am currently working on extracting the first comment block from a CSS file. Specifically, I am looking for comments that follow this pattern: /* author : name uri : link etc */ and I want to exclude any other comments present in the file, such as: /* ...

pythoncssregexcommentstext-processing

Troubles arise when trying to place images next to items in an unordered list

I'm trying to create an unordered list with list items that include images with bullets beside them. However, when I use a background image to achieve this, the image ends up behind the text. If I set the image as a list-style-image, it doesn't l ...

htmlcsslist

Utilize Bootstrap in an Angular template to effortlessly expand one element while collapsing all others

I'm facing an issue with a table in my component. Each row has a button that, when clicked, should expand to show some calculated data specific to that row. However, the problem is that when one button is expanded, it keeps other buttons expanded as w ...

javascripthtmlcssangularangular-ui-bootstrap

Developing Wordpress plugins involving images - path not found

I'm currently developing a WordPress plugin and encountering some issues with images. My plugin is located in wp-content/plugins/my-plugin/ directory, and within that, there's a folder named images/test.png - how can I properly reference this ima ...

cssstylesheetwordpress

I'm attempting to create 16 squares using bootstrap, but for some reason, it's not functioning properly and I'm unsure of

I'm struggling to create 16 squares on my website using Bootstrap, but it's not working as expected. I tried using "col-xs-3" for the width, but it's not setting correctly. Can someone please assist? PS (I know I could customize the width i ...

htmlcssbootstrap-4flexbox

Unoccupied whitespace created by using Bootstrap

I'm experiencing a challenge with the code below in terms of large spaces being left when columns are collapsed. Is there a way to eliminate these spaces? body { font-family: sans-serif; max-width: 100%; overflow-x: hidden; } .poster { heig ...

htmlcssbootstrap-4

How can I incorporate checkboxes and crosses for validation in AngularJS?

I've been searching through the documentation for angularjs and online resources, but I can't seem to find any information regarding a specific aspect of form validation. You know when you input something in a form field (like a name, phone numbe ...

cssangularjs

Exploring the world of sass with compound mathematical statements

There's a slight issue that I'd like to circumvent. $var: 30px; font: 25px/25px font,font,font; //Works font: ($var - 5)/($var - 5) font, font, font; //Works not font: ($var - 5px)/($var - 5px) font, font, font; //Works no ...

csssass