How can I use CSS to clip the United States, specifically Tennessee and Nashville, from the left side?

For my ASP.NET generated hyperlink that says "select location", when the user clicks on it, they are redirected to a new page where they can choose a different location at /change-location/default.aspx. This could be any country, state, or city in the world:

"United States > Tennessee > Nashville"
"Australia > New South Wales > Sydney"
"Saint Vincent and the Grenadines > Other > Port Elizabeth, Bequia"

On mobile portrait mode (320px wide with 10px margin on each side), the entire hyperlink usually displays properly.

However, if the link is particularly long like this example:

"Saint Vincent and the Grenadines > Other > Port Elizabeth, Bequia"

It wraps to the next line, which we want to avoid. Our goal is for the link to stay on one line only.

To achieve this, I am looking for a way to have the text clipped with ellipses from the left if its width exceeds 300px:

"... Grenadines > Other > Port Elizabeth, Bequia"

Is there a CSS solution for this?

htmlcssasp.net

Answer №1

I recently implemented this solution in one of my asp.net projects. To achieve the ellipsis effect on the left side, you can make use of properties like direction, text-align, and text-overflow.

p {  
    white-space: nowrap;                     
    overflow: hidden;              
    text-overflow: ellipsis;  
    width:300px;
    direction: rtl;
    text-align: left;
} 
<p>"United States > Tennessee > Nashville"<br />
"Australia > New South Wales > Sydney" <br />
"Saint Vincent and the Grenadines > Other > Port Elizabeth, Bequia"</p>

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

Conceal or style the filter panel in a DT datatable

Here is an example to consider: library(DT) L <- 10 datatable( data.frame( var1 = sapply(1:L, function(x) paste("<X>",paste0(x, letters, LETTERS, "\n", ...

jquerycssrdatatableshiny

Prevent instant notifications on mobile devices following the scanning of a QR code in an Android app

My current application utilizes instascan for scanning QR codes. However, I am encountering an issue where an alert pops up with the decoded result every time a QR code is scanned on an Android phone. For instance, if the QR code contains the text "I like ...

c#androidasp.netqr-codeinstascan

Hover over the text below to see an image appear in its place

I'm looking to swap out some text with an image when hovering over it, using basic HTML/CSS. NO: show the image below the text NO: display the text on top of the image NO: replace one image with another YES: replace the text with an image ...

htmlcss

Python Selenium for Element Detection

I am a beginner when it comes to using Selenium and I am currently seeking guidance on how to locate the element that is highlighted in this image: https://i.sstatic.net/uXf4u.png Despite my attempts, the following code resulted in an error message being ...

pythoncssselenium

Is there a method to stop a mobile device from rotating my responsive website on mobile devices?

Currently, I am in the process of developing a mobile responsive website and I'm aiming to prevent any rotation on Safari specifically. Is there a way that I can achieve this without affecting other browsers like Android? ...

htmlresponsive-designmobile-safariweb-deploymentmobile-website

arranging the divs based on the space allocation within the page

Is there a way to neatly organize the divs on a page, depending on available space? I want them to align horizontally if there is enough room before moving to the next line. The tab-content parent div may contain several divs. Any suggestions on how this c ...

htmlcss

Encountering an undefined error while attempting to retrieve an object from an array by index in Angular

Once the page is loaded, it retrieves data on countries from my rest api. When a user selects a country, it then loads the corresponding cities for that country. Everything is functioning properly up to this point, however, upon opening the page, the city ...

javascripthtmlangulartypescript

CssLint detected an unfamiliar property: "fill"

Currently, I am updating the color of an SVG path using CSS: .compute .svg path { fill: #fff; } The functionality is working properly, however, during a CSSLint check, I received this warning: Unknown property: "fill" I am unsure if this is an erro ...

csssvgcsslint

I encountered an issue where I am unable to subtract from jQuery's .outerHeight() within an if statement

I've been working on creating an ajax request that triggers when a div is scrolled to the bottom. I thought I had it figured out with this code, but I've run into an issue. Everything works fine without subtracting 100 from the elem.outerHeight() ...

javascriptjquerycssscroll

Guide to implementing an ES6 template within an HTML anchor tag href

Hello there, this is my first time seeking assistance here. I have an ajax request returning a JSON response. Now, I am aiming to use the response data to dynamically generate recipe titles and also create clickable links with that data. $( window ).load( ...

javascriptjqueryhtmljsonajax

Tips for building a homepage button with an image and text using HTML and CSS

My ultimate goal is to create a button for the main page. I am looking to place an image and text side by side within this button, with a click on it directing me to the main page. Unfortunately, I have been facing challenges in resizing or stretching the ...

htmlcssstretching

Ways to compare two strings in SQL server without considering case differences to avoid it being true

Looking to determine if two strings are matching in case sensitivity using SQL Server 2016 In the following example, the strings do not match due to case sensitivity. Is there a method to address this issue? Declare @str1 varchar (100) ='Yes' D ...

sqlasp.netsql-servert-sqlstored-procedures

What is the best way to include a dialog div within a form tag?

I am facing an issue with a JQuery dialog on my webpage. The data entered into the dialog seems to get lost because the dialog is placed outside the form tag. Here is how it appears: https://i.stack.imgur.com/fnb07.png So far, I have attempted this soluti ...

javascriptjqueryhtmlformsdialog

problem updating data with collapsible panels

I am encountering an issue with my accordion control (using jQuery) on the page. It seems that when I insert the contents of my page into an updatepanel, the accordion stops working. However, if I remove the updatepanel, it starts working again. I'm ...

jqueryasp.netupdatepanel

What is the best method to achieve a width of 100% for an element (textarea) that has unspecified borders and padding, while also including the borders and padding

Native borders for input controls in various browsers often look more visually appealing compared to those set with CSS. However, the thickness of these native borders and padding can vary across different browsers, making it difficult to predict beforehan ...

css

Interactive image sliders in a Netflix-inspired style with live previews on hover, fully compatible with Bootstrap framework

I'm looking for suggestions on Twitter Bootstrap compatible jquery plugins that can create a Netflix-style continuously scrolling image carousel with mouse-over functionality. I've tried the carousel included in the Bootstrap JS library, but it r ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

Automatically adjust text size within div based on width dimensions

Dealing with a specific issue here. I have a div that has a fixed width and height (227px x 27px). Inside this div, there is content such as First and Last name, which can vary in length. Sometimes the name is short, leaving empty space in the div, but som ...

javascriptjqueryhtmlcssresponsive-design

Is it possible to create a d3 gauge chart showcasing data with both labels and

We've been on the hunt for a radial chart that resembles the one shown below. What makes this chart stand out is the clear display of percentage values. Despite our search efforts over three days, we have yet to come across anything using the d3.js li ...

javascriptjqueryhtmld3.jscharts

Is it possible to implement browser-specific CSS in Next JS without affecting other browsers?

Will Next JS automatically add all necessary browser prefixes to CSS styles defined with style jsx, or do I need to write the browser supports manually in my styles when using Next JS? transform: translate(50%, 50%); -webkit-transform: translate(50%, 50%); ...

cssnext.jswebkit

Chosen option from the Bootstrap drop-down menu

Struggling with two problematic input fields on my Bootstrap website... The first is a Bootstrap Typeahead input field: <input type="text" id="typeahead" name='name' placeholder='The name' class="form-control" data-provide="typeahe ...

javascriptjqueryhtmltwitter-bootstrap