How to apply CSS ellipsis to inline elements?

After modifying the jQuery UI MultiSelect Widget to display all selected labels, I encountered an issue where too many elements would cause the text to be trimmed and ellipsed. My solution involved the following CSS:

.ui-multiselect .selected-text {
    display: block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

The only drawback of this approach is having to set display: block on the element (span). This was necessary because without it, the width parameter was ignored and the span expanded to fit the entire text length.

I'm curious if it's possible to achieve the ellipsis effect with inline elements, avoiding the need to change display to block. If so, how can this be accomplished?

htmlcssellipsis

Answer №1

When faced with a situation where you need your element to behave like both an inline and a block, there is a clever solution available...

It goes by the name of

display:inline-block;

Instead of using block, opt for this style, and your element will seamlessly integrate into your content like it's inline while functioning as a block for its inner content, allowing your ellipsis to function correctly.

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

Div that scrolls independently without affecting the position of other elements

Visit this link for reference <div class="col-10 content" id="content"> <ul> <li>News</li> <li>News</li> <li>News</li> <li>News</li> < ...

htmlcssscroll

Seamless Navigation with Bootstrap Navbar and SmoothScroll

Currently, I have a custom-built navbar that functions perfectly, with full mobile responsiveness. However, I am facing an issue with the nav-item's (headings). The nav-item's direct users to different sections of the same page using #. I have i ...

htmlangulartypescriptbootstrap-4

Simultaneously transitioning two full-width elements by sliding them in and out

Currently, I am working on creating an animation effect where one element slides out of the screen on the left while fading out to 0 opacity. Simultaneously, a new element slides in from the right to take its place. Although the visual aspect is functioni ...

cssreactjs

Enter your text and click submit all in one shot

https://i.sstatic.net/OcBI0.png Is there a way to achieve this effect (compatible across different browsers) without using the float: left property? I'm trying to center this form, so using the float attribute isn't working for me. Can anyone o ...

htmlcssinput

Incorporating an HTML Canvas element within a CSS grid design

I've been attempting to integrate an html canvas that I created into one of the css grid classes specified in my code. The code runs when the "Calculate" button is clicked. Upon clicking the button, the <div> section designated for the canvas r ...

javascripthtmlcsscanvas

What is the correct way to transfer, generate, and display fresh data from my HTML into JavaScript and ultimately onto the browser?

Could someone help me with implementing a JavaScript function that utilizes an HTML prompted modal containing an input text field, radio button selection, and a submit button? I need guidance on how to capture the data from the modal, send it to the backen ...

javascripthtmlmongodbexpress

Adjust the horizontal background-position transition for color change while scrolling using jQuery and CSS

I came across a fascinating website - - where the background-position changes on scroll() from a linear gradient with two colors to smoothly slide one color off the screen. While I grasped how they achieved the split colors using linear-gradient, I'm ...

jquerycssscrollbackground-colorbackground-position

Implementing grid items in CSS Grid that do not stretch the grid row and have a container that is scrollable

Here is my dilemma: I am looking to create a grid with a fixed number of columns (that can be adjusted via javascript) and a variable number of rows, all with equal heights. The rows will be determined by the number of grid items, which are represented a ...

cssangularscrollflexboxcss-grid

How to position the close (X) button on the corner of an image within a CSS grid

I have a collection of images with varying sizes and ratios in a responsive CSS grid layout. Each image needs to have a close button located at the top-right corner. To achieve this, I have inserted a form within each grid cell with a button and an image i ...

htmlcsstwitter-bootstrapbootstrap-4

What is the necessity of using a <br> tag within an unordered list (ul)?

Just starting out with basic HTML and I noticed that to ensure each item in a list appears on a separate line, I have to add a <br> tag after each <li> option. <ul> <li>Item One</li><br/> <li>Item Two</ ...

html

PHP code to verify the presence of a file on a distant server

Currently, I am facing difficulties in finding a PHP script that will help me retrieve the contents of a txt file stored on a remote server and then store it in a variable. The challenging part is not outputting to a variable but rather reading and accessi ...

phphtmltext-files

Sending FormData from React.js to an Express.js backend results in loss of data

I encountered a problem while developing a book library management CRUD system using React v18. The issue arises when attempting to add data to my MongoDB Atlas database. Whenever I pass the formData to axios.post through Redux, the req.body on the backend ...

javascripthtmlnode.jsreactjsexpress

Enhance JavaScript by incorporating the selected value of an HTML dropdown menu

My code is as follows: <select name="points"> <option value="5">5 points</option> <option value="10">10 points</option> <option value="50">50 points</option> </select> This is my JavaScript code: < ...

javascriptjqueryhtml

Turn off the div element until a radio button option is selected, then activate it

Is there a way to disable a div and then activate it only after selecting a radio button option? I know how to hide and show the div when an option is selected, but using the hidden property is not ideal. Can someone suggest a possible solution? <div ...

javascripthtmlangular

Encountering an Uncaught TypeError within a 'forEach' loop due to it being identified as not being

Here is some HTML code: <div class="grid-container"> <div class="grid" id="grid-div"> <div class="cell1"></div> <div class="cell2"></div> ...

javascripthtmlarraysdomforeach

Sliding Tab Pane Transition in Bootstrap Framework

Hi there, I'm having some trouble figuring out how to switch the transition from fade to slide in my list of tab-panes. I haven't been able to find any helpful resources on this specific issue. Currently, my list looks like this: tab-pane fad ...

jqueryhtmlcsstwitter-bootstraptabs

Ways to properly close open HTML tags using node.js?

Have you ever encountered a situation where user-entered content from a database or similar source only contains the opening tag without the closing tag? This can disrupt the layout of your website. Is there a way to fix this issue using Node.js on the s ...

javascripthtmlnode.js

Create a dynamic table component that automatically displays the values of each property in the current object data iteration using the ngFor directive

Let's get straight to the point, I am working on a table component that takes in an Object containing all the necessary information for a dynamic table, including header details. My goal is to make it possible for each row of data to display its value ...

htmlangularobjectcomponentsngfor

Angular Material autocomplete options are obscured by browser autofill suggestions

I am facing a challenge in Angular Material where the material autocomplete feature is functioning properly, however, the browser's autofill options are causing an overlap with the material autocomplete popup. Is there a way to disable autocomplete fo ...

javascripthtmlangulartypescriptangular-material

Is it possible for Java Applets to interact with external sources with user consent?

My goal is to develop a platform where users can input external websites, and my application will modify the returned source before providing it back to the user. The challenge lies in the fact that HTML5 and flash sockets have limitations when it comes to ...

javahtmlappletexternalsame-origin-policy