What is the reason this text is not utilizing the css property ellipsis?

There is a problem I am facing where the user's name becomes too long, but only in mobile view. I need to apply the text-ellipsis CSS property for this issue. Here's a screenshot: https://i.sstatic.net/T6vi3.png

Prior to adding the styles mentioned in the image, the text "jadakiss from the gu lox is the shiiiiiiiiit" was breaking after "the," with part of it hidden behind the rating and location. To address this, I included 

white-space:nowrap; overflow-x:hidden; text-overflow:ellipsis
within the <a /> tag housing the text, set a fixed width on the div container, and added a red border for visibility.
Despite my efforts, the ellipsis CSS property is not working as expected. Can someone point out what might be missing? Any help or suggestions would be greatly appreciated!

htmlcssfrontend

Answer №1

Try including display:inline-block; in your <a> element.

Answer №2

To prevent overflow, apply the CSS property "overflow: hidden" to the parent element <div> and specify a max-height or max-width (in this case, max-width), not directly to the <a> tag itself. The <a> tag will not overflow if its display property is set to inline by default.

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 causes the discrepancy in CSS behavior between local and remote websites?

My chrome extension enhances facebook chatbox with jquery autocompletion. I am trying to make the suggestion list menu horizontal by modifying the jquery-ui.css. When changing display:block to display:inline, the list becomes horizontal in a local HTML fil ...

javascriptjqueryhtmlcssfacebook

Transforming HTML into a DOCX document

I am exploring all possible options for converting an HTML document to a DOCX file. Background : I have some simple documentation in HTML (just basic elements like H1, H2, P, IMG), and I want to transform it into Word documents. An ideal solution would ...

htmlmavendocxdocfile-conversion

What makes @font-face function on Safari but not on Firefox in Mac versions?

Can anyone help me troubleshoot a font issue on my website? I've added the following code to the CSS file, and it's working fine in Safari, but not in Firefox. I'm new to coding, so please bear with me if this seems like a basic question. I& ...

cssfirefoxsafarifont-face

Creating a dynamic CSS height for a div in Angular CLI V12 with variables

Exploring Angular development is a new venture for me, and I could use some guidance on how to achieve a variable CSS height in Angular CLI V12. Let me simplify my query by presenting it as follows: I have three boxes displayed below. Visual representatio ...

javascripthtmlcssangulartypescript

Creating CSS dynamically using PHP

Even after reading numerous blogs and forums, I'm still unable to get this working. My goal is to allow users to personalize their user account style sheet. I made sure to include <?php header("Content-type: text/css"); ?> at the beginning of t ...

phpcss

The XPath function $x() will always return an array, regardless of whether or not an index is specified

How can I target the div elements that have the class "month-table_col" (selecting by month). ... <div class="month-table"> <div class="month-table_row"> <div class="month-table_col">Jan ...

htmlcssxmlxpathweb-scraping

Display a unique button and apply a strike-through effect specifically for that individual list item

I've encountered an issue with my code that is causing problems specifically with nested LI elements under the targeted li element: $('#comment-section .comment-box a#un-do').hide(); $('#comment-section ul li[data-is-archived="true"]& ...

javascriptjqueryhtmlcss

The usage of CSS pseudo elements with the position absolute property

To allow for the opacity of an image to be changed without affecting the parent container's opacity, I added the image as a pseudo-element. The position of the pseudo-element is set to absolute and relative to the parent to position it inside the p ...

htmlcsscss-positionpseudo-element

What is the best way to update a specific column value in a table using AngularJS?

How can I achieve opening a specific row's text-area when clicking the "Add_Note" button inside a table column, without affecting all other rows? I want to show them using index value while using ng-repeat. var myApp = angular.module('myApp&ap ...

javascripthtmlangularjs

What could be the reason for Material UI xs={12} not extending to the full width of a mobile screen?

click here for image On my mobile screen, my components should be taking up the entire width but they seem to have an invisible margin on the right. <React.Fragment> <CssBaseline /> <ThemeProvider theme={theme}> <Grid ...

cssreactjsmaterial-ui

Challenges in achieving seamless interaction between Javascript Form and Ajax for logging in to a Secure Magento Store

My Webdeveloper abandoned me and my form doesn't seem to work always. When clicked it doesn't appear to do anything (just shows the "javascript:;" href on the browser status bar), but sometimes it works... I've searched everywhere for a so ...

javascripthtmlajaxmagento

Apache server is failing to perform HTML encoding

Currently working on a PHP code where a method is returning text to display an image. Here is the snippet of the code: $ret = "<div align=\"center\">" . "<image src=\"" . "${webserviceDir}Graph.php?usr_id=" . urlencode($usr_ ...

phphtmlapache

Tips for using Jquery to retrieve HTML from external sources

I have successfully managed to display an internal webpage on my HTML, as shown below: <!doctype html> <html> <head> <script type="text/javascript" src="jquery-1.4.4.js"></script> </head> <body> & ...

jqueryhtmlget

Is the width set to fill the entire partial screen?

I'm facing a dilemma: I want the darkest-gray bar at the bottom right (visible after running the code below) to stretch as far as the browser window allows without encroaching on the light-gray section on the left. Here's the code snippet: <d ...

csswidth

Is there a way to reposition the arrows in this Bootstrap 5 accordion to appear ahead of the text?

Here's an example from Bootstrap 5 web page that I've been working with (https://getbootstrap.com/docs/5.0/components/accordion/). My query pertains to positioning the arrows before the text in the accordion items. Despite attempting various appr ...

htmlcssbootstrap-5

The "hidden" class in Bootstrap 4 is not functioning as expected

I have Bootstrap v4 set up with its default CSS and JS. I'm attempting to use the classes hidden, hidden-XX-down, and hidden-XX-up on different divs, buttons, etc. However, it doesn't seem to be having any effect. All other classes are working fi ...

csshtmltwitter-bootstrapbootstrap-4

Is there a way to change the background color of product blocks on Shopify in a dynamic

Is there a way to customize the background colors of product blocks on Shopify by modifying the shop code? Take a look at this example: Mockup showing alternating block backgrounds Currently, all product blocks in the grid have a black background with wh ...

htmlcssshopify

The CSS 'd' attribute for the <path> element is not functioning properly in Firefox

My generated code cannot be directly modified due to its association with a large JS code. A portion of this code creates an SVG shape, which I attempted to override through CSS. However, my solution does not function properly in Firefox! Below is the ori ...

cssfirefoxsvg

Reorganize elements using CSS styling

I have a trio of child divs with the classes span2, span7, and span3. When my browser width drops below 763px, I want them to display in the order span2, span3, and span7. How can I achieve this using CSS? Here is the code snippet I started with: <div ...

htmlcss

The issue with using HTML code inside a variable that is passed into a partial view is that the code is not being

I have created a partial view to show the page header, which takes in two variables - an Icon and a title. The code for pageHeader.blade.php is as follows: <div class="page-header"> <div class="row"> <!-- Page header, center on small sc ...

htmllaravellaravel-5laravel-blade