Issue with Bootstrap where Flex and Nowrap are not functioning properly with the first column when using text-truncate

How can I prevent the first column from wrapping to the second row? The second column has text truncation applied to it. What changes should I make to ensure the first column expands and never wraps?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet"/>
<div class="card-header text-center d-flex justify-content-center" style="width:350px">
<div class="mr-1 flex-nowrap" data-bind="html: TimeFormatted">
    9:05 AM CDT
</div>
<div class="d-flex text-truncate">
    @
    <span class="text-truncate mx-1" data-bind="text: VenueName">
        ACA  dsf asdf sdsadf d fsd fsd fsd fsa
    </span>
    (<span data-bind="text: CourtName">East</span>)
</div>
</div>

cssbootstrap-4flexboxword-wrap

Answer №1

To prevent an element from shrinking, use the CSS property flex-shrink: 0

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet"/>
<div class="card-header text-center d-flex justify-content-center" style="width:350px">
        <div class="mr-1 flex-shrink-0 flex-nowrap" data-bind="html: TimeFormatted">9:05 AM CDT</div><div class="d-flex text-truncate">@<span class="text-truncate mx-1" data-bind="text: VenueName">ACA  dsf asdf sdsadf d fsd fsd fsd fsa</span> (<span data-bind="text: CourtName">East</span>)</div>
    </div>

Answer №2

To prevent the text wrap within the first div, you can override it by adding white-space: nowrap; to ensure the text remains unwrapped.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet"/>
<div class="card-header text-center d-flex justify-content-center" style="width:350px">
  <div class="mr-1 flex-nowrap" data-bind="html: TimeFormatted" style="white-space: nowrap;">9:05 AM CDT</div>
  <div class="d-flex text-truncate">@<span class="text-truncate mx-1" data-bind="text: VenueName">ACA  dsf asdf sdsadf d fsd fsd fsd fsa</span> (<span data-bind="text: CourtName">East</span>)</div>
</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

What is the best way to manage classNames dynamically in React with Material-UI?

I am wondering how to dynamically add and remove classes from an img tag. My goal is to change the image automatically every 2 seconds, similar to Instagram's signup page. I am struggling to achieve this using the material-ui approach. Below is a snip ...

javascriptcssreactjsreact-hooksmaterial-ui

How can I apply a blue border to highlighted elements in the live preview?

Upon clicking on the div or element within the brackets, the live preview in Chrome briefly flashes blue and then fades away. However, it does not create a thin blue border around the element like I have seen in other people's videos. Can someone plea ...

htmlcssadobe-brackets

Dynamically showing a div using JavaScript and AJAX after changing the window location

After successfully fetching data from the server through AJAX, I am redirecting to the same screen/URL. Is it possible to show/display a div after redirecting using jQuery? $.ajax({ type: "POST", url: action, data: form_data, success: func ...

javascriptjqueryhtmlcssajax

JavaScript Calculator experiencing difficulty with adding two numbers together

I've been working on developing a calculator using HTML and JavaScript, but I'm facing an issue when trying to add two numbers together. Strangely enough, when attempting to calculate 1 + 0, I get the result of 512, and for 1 + 1, it returns 1024 ...

javascripthtmlcssmathbootstrap-4

Why isn't the HTML template opening in Outlook 7?

Does anyone know how to fix the code issue on Outlook 7? I've only included the header section of my code here, but please let me know if you need more information. I would appreciate any help with this problem. Thanks! ...

csshtml

Applying identical values to multiple properties (CSS)

Can we assign a single value to multiple CSS properties at once? border-left, border-right: 1px solid #E2E2E2; Similar to how we can with selectors? .wrapper, .maindiv { ... } ...

css

Styling with CSS - Mastering the Genesis Bootstrapped Column Grid

Having some issues with the alignment of the margins on my widgetized home-page for a WordPress Genesis theme - Outreach Pro. The two “About” widget areas on the top row are not lining up correctly with the third (Friends) & fourth (Donate) widget are ...

csswordpressclassgenesis

Participant joins in the game table and reacts

I am looking to set up a table where players can join and have their usernames displayed at the bottom of the screen just like in other games. How can I achieve this? export const GameStart = (props) => { const params = useParams(); const gameID = p ...

javascriptcssreactjs

Ways to customize the appearance of Angular material elements one by one?

I have a component that contains two Angular Material form components: <!-- First input --> <mat-form-field> <mat-label>Password</mat-label> <input matInput type="text"> </mat-form-field> <br&g ...

cssangularangular-material

How to style an element with multiple parent elements in CSS

Is there a way to target the p element in the code snippet below in order to reset its color property? I want to change it to 'none' or something similar. Any guidance on how to achieve this would be greatly appreciated. <div class="a"> ...

csscss-selectors

The iPhone screen is unresponsive, causing the webpage to zoom in to the top left corner repeatedly

I've been wracking my brain trying to solve this issue, searching high and low on this site and others for a solution. I've attempted various configurations with the viewport meta tag, removing the fb-root div, ensuring there is no height=100%, b ...

iphonehtmlcssasp-classicviewport

Updating the CSS properties of a specific element within a dynamically generated JavaScript list

So I'm working on a JavaScript project that involves creating a navigation bar with multiple lists. My goal is to use the last list element in the bar to control the visibility (opacity) of another element. So far, I have been using the following code ...

javascriptjqueryhtmlcss

Ways to remove the line under a logo in HTML using CSS and Bootstrap

While working on a website design, I encountered an issue with the logo where it has a line of the background color under it. This is frustrating and affects the overall design. Does anyone have a straightforward solution to remove this line? I need someth ...

htmlcsstwitter-bootstrapimage

When the mouse is moved to the UL LI list, the border color of the Top Hover is reverted back to default

Can you assist me with this issue? I need to modify the code below so that the border color remains blue while a user selects an item from the UL LI list. Here is an image showing the current problem: https://i.sstatic.net/DS7hO.png And here is a pictu ...

htmlcssdom

What could be the reason for the Bootstrap 3 row not expanding to accommodate the content?

I am working with the following HTML structure: <div class="container-fluid"> <div class="row"> <div class="col-sm-push-3 col-sm-6 text-center wrapper"> <div class="col-sm-4 inner-wrapper"> & ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Issue with Navigation bar: Bootstrap menu fails to open upon clicking

My Bootstrap menu is experiencing an issue where it fails to open when I click on it. This means that I can't see any items in the menu. However, when I press the "Down key" on my keyboard, it opens immediately. This issue seems to occur specifically ...

javascriptphphtmlcsstwitter-bootstrap

Are the stylesheets on my computer also applicable to Chrome?

For instance, an anchor tag by default has specific styles such as being blue, turning purple when visited, and changing the cursor when hovered over. So, where exactly does Chrome pull these styles from? Could there be a Google Chrome style-sheet stored ...

cssgoogle-chromebrowserstylesheet

What are some ways to ensure keyboard accessibility for a CSS drop-down menu?

I have come across some solutions, but I am struggling to incorporate them into my code as some require elements that are not compatible with my project. Let's get to the question: I need help making an existing CSS drop-down menu accessible for key ...

htmlcssdrop-down-menuaccessibilitykeyboard-navigation

Adjust the appearance of input fields that exclusively have the value "1"

When designing my website, I encountered a problem with the style I chose where the number "1" looks like a large "I" or a small "L." I am wondering if there is a way to use JavaScript to dynamically change the font style for input fields that only contai ...

javascriptjquerycss

The SVG path is not aligned properly with the container's viewbox dimensions

Recently, I came across an icon provided by a plugin I am using called calendar. However, I wanted to enhance my icons set with a new addition - the twitter icon. svg { display: inline-block; height: 16px; width: 16px; margin: 2px 0; ...

htmlcsssvg