Guide to truncating text based on screen size with ellipses

I'm currently working on a project with two bootstrap cards inside a page layout with columns. The issue I'm facing is that when the name of the card exceeds 11 characters (with a maximum of 15), resizing the screen between 768px-1200px causes the name to squish the star/rating down to the next line.

My question is, is there a way to truncate the name (e.g., AnneMariesPlace) between 768px-1200px with ellipses, so that the star/rating remains on the same line? For example, AnneMari... with a maximum length of 8 characters plus the ellipses (3 characters).

I have tried using CSS properties like text-overflow: ellipsis; and white-space: nowrap; but haven't had much success. Below is the code I'm currently using:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
            <div class="container my-3 my-xl-5">
                <div class="row">
                    <div class="col-lg-3">
                        something here
                    </div>

                    <div class="col-lg-9">
                        <div class="row">
                            <div class="col">
                                <div class="mb-4">
                                </div>

                                <div class="row row-cols-1 row-cols-sm-2">
                                    <div class="col mb-4">
                                        <div class="card">
                                            <div class="row no-gutters">
                                                <div class="col-md-5">
                                                    <img class="yogaband-img img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_1450,h_1450/f_auto/v1569538700/mainpage/iStock-860080282_bkhfsu.jpg" alt="yogaband">
                                                </div>

                                                <div class="col-md-7">
                                                    <div class="card-body py-1">
                                                        <div class="row">
                                                            <div class="col-12">
                                                                <b class="card-title d-inline">AnneMariesPlace</b>
                                                                <span class="float-right center-star">
                                                                    &#9733;3.43
                                                                </span>
                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <div class="col-12">
                                                                <span>Access</span>
                                                                <span class="float-right">Private</span>
                                                            </div>
                                                            <div class="col-12">
                                                                <span>Max Size</span>
                                                                <span class="float-right">10</span>
                                                            </div>
                                                            <div class="col-12">
                                                                <span>Events</span>
                                                                <span class="float-right">323</span>
                                                            </div>
                                                            <div class="col-12">
                                                                <span>Type</span>
                                                                <span class="float-right">Park</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col mb-4">
                                        <div class="card">
                                            <div class="row no-gutters">
                                                <div class="col-md-5">
                                                    <img class="yogaband-img img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_1450,h_1450/f_auto/v1569538700/mainpage/iStock-860080282_bkhfsu.jpg" alt="yogaband">
                                                </div>
                                                <div class="col-md-7">
                                                    <div class="card-body py-1">
                                                        <div class="row">
                                                            <div class="col-12">
                                                                <b class="card-title d-inline">AnneiMaries</b>
                                                                <span class="float-right center-star">
                                                                    &#9733;3.43
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-12">
                                                                <span>Access</span>
                                                                <span class="float-right">Private</span>
                                                            </div>
                                                            <div class="col-12">
                                                                <span>Max Size</span>
                                                                <span class="float-right">10</span>
                                                            </div>
                                                            <div class="col-12">
                                                                <span>Events</span>
                                                                <span class="float-right">323</span>
                                                            </div>
                                                            <div class="col-12">
                                                                <span>Type</span>
                                                                <span class="float-right">Park</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

In order to activate the ellipsis feature, certain conditions must be met. Firstly, the element should not be classified as inline. Even if you have set it with an !important condition (the reason for this is unknown), it still needs a specified width (percentage or fixed) and must have overflow:hidden and white-space:nowrap declared to prevent the content from wrapping onto a second line.

Following your example, the necessary CSS would be:

.d-inline {
    display: inline-block;
    overflow: hidden;
    width: calc(100% - 44px);
    white-space: nowrap;
}

Unfortunately, it seems that your "score" element is restricted to a maximum width of 44px. It is advisable to allocate a slightly larger space to accommodate potential factors like browser zooming.

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

The width of the Div is set to 100%, yet there is still some empty space visible on

I am having trouble setting the background of my code to display a picture that is 300px in height and 100% in width. However, when I set the width to 100%, there are about 15px gaps on each side. I could adjust the width to 1000px, but that presents issue ...

htmlcssspacing

Position an element to the right within a div using the float property

My product page features a range of attributes that can vary from 1 to 4, each sharing a common fieldset class name. I am attempting to position two of the fieldsets side by side and the remaining ones below them in a similar layout. However, achieving thi ...

htmlcss

What are some strategies for dividing a webpage evenly between an image and a text-containing div?

I am currently working on emulating a layout that I came across on another website ( if you scroll down past the video and profiles). The layout involves splitting the page 50/50 with a picture that is responsive and maintains its size when the page is res ...

htmlcssreactjsmaterial-ui

Tips for generating an interactive collapse effect with the simple click of a button

Does anyone know how to implement a collapsible feature when a button is clicked? I would appreciate some assistance. Essentially, the goal is to extract data from the screen when the "Add" button is clicked, and then display it in a collapsible format. ...

htmljquerybootstrap-4

Placement of navigation bar on top of picture

Creating a gaming website and encountering challenges with text alignment. The goal is to have the navbar text positioned on top of a customized navbar background. Current appearance navbar example <!DOCTYPE html> <html> <head> ...

htmlcss

JavaScript is unable to bring in an npm module

Having trouble importing an npm module using import fs from 'fs'; in my main.js file that is linked with index.html. The script tag connecting the JS file has the attribute type="module". However, the browser console shows the error: Un ...

javascripthtmlnpmimportmodule

Incorrectly colored buttons upon clicking

I am experiencing an issue with my website where the color of the container div is not changing to the correct color when a button representing a color is clicked. Instead, it seems to be displaying the next color in the array of color codes that I have se ...

javascriptjquerycss

Expanding the table area in bootstrap

I am currently working on a video slider using bootstrap. I have added a table within the slider (carousel) and it is functioning perfectly. However, I am now looking to update the layout to resemble the image below. I have successfully applied the backgro ...

htmlcsstwitter-bootstraphtml-table

Generating an interactive 3D model of a web page embedded within a virtual environment

Exploring the concept of rendering a webpage within a 3D Scene using Three.js has been quite challenging. Most examples I come across seem to render something that is not interactive when clicked on. I've stumbled upon older videos showcasing clickab ...

htmlthree.js

Creating an attention-grabbing alert bar positioned above the menu

When I attempted to add this alert bar to my website, I encountered an issue where it was being hidden behind my menu. Some sources suggest that using z-index and position:absolute can resolve this problem by positioning one element above the other, but th ...

htmlcssmenustyles

Can a CSS Grid layout be achieved without prior knowledge of image sizes?

I am working on a project where I am pulling images from Reddit and aiming to showcase them in a gallery-style grid. I have tried using a flex display and resizing the images to match dimensions, but unfortunately not all images have the same dimensions ...

htmlcssreactjs

Troubleshooting a Border Problem in CSS

Just joined this site and I'm new to coding, eager to learn more. I'm trying to make the border of this grey box grey, with the rest being blue. I've searched online but can't find exactly what I need. The grey area is 200px wide and ...

cssborder

What is the best way to alter the background of a div when hovering over an image?

I am looking to achieve a unique effect with my thumbnail image and background. Currently, I have the thumbnail image inside a div with another image serving as the background to frame it. My goal is to change the position of the background image from bott ...

jquerycss

What causes the inability to separate the span size from the parent div when enlarging the span width?

Check out this Relevant Fiddle: https://jsfiddle.net/promexj1/1/ I'm working on adjusting the widths of two child spans within a parent div to be slightly smaller than the parent itself (due to starting translation 10px to the right for one of the sp ...

htmlcss

Error in iOS Browsers when ASP4.5.1, Bootstrap, and AJAX Control Toolkit are used in conjunction with ScriptManager

I recently updated my application on www.cougarsbaseballsoftball.com and it functions properly on IE and Chrome when accessed from a PC. However, it is experiencing issues on Safari and Chrome on iOS8 devices. Upon pageload, an error message stating, “Th ...

ajaxtwitter-bootstrap

The callback function in AngularJS filters

I'm currently using an AngularJS filter to sort through a list of items. Here is the Jade markup I am using: li(ng-repeat="parcel in parcels | filter : filterActiveAreaParcels") After the filter function runs and the elements are displayed in the DO ...

javascriptjqueryhtmldomangularjs

Exploring Instagram post layouts: A comparison of card-columns in Chrome versus other web browsers

Utilizing Bootstrap 4 card-columns for showcasing Instagram posts on a website has showcased some discrepancies across different browsers. Notably, Chrome seems to be losing the second column as compared to other browsers. Screenshots highlighting these di ...

htmltwitter-bootstrapgoogle-chromebootstrap-4

What is the best way to incorporate a background image that complements my content?

I'm currently working on revamping my friend's windsurf club website. The issue I'm facing is with trying to achieve a more elegant appearance by positioning a background image behind the <h1> and <h2> elements. Currently, I have ...

htmlcssbackground-imagebootstrap-5

Tips for achieving seamless scrolling with the combination of javascript and css

Looking for a solution to achieve smooth scrolling on an HTML page without using the #id_name to scroll to a specific div. Instead, I want to scroll to a particular point, such as having a button that scrolls down the webpage smoothly by 250px when press ...

javascripthtmlcss

Keep the entire table in place as the user scrolls

I'm trying to create a sticky table that moves while scrolling the page. I currently have two tables, one after another. However, when I scroll the page, only the first table moves about 10px and then stops. My tables don't move at all. Can anyon ...

javascriptjqueryhtml