Displaying ellipses on the right side and right-aligning text

I have a situation where I used direction:rtl; to display text in reverse order. However, I am facing an issue with truncating extra text on the right side only, not on the left.

   .file-upload-status {
    border: 1px solid #ccc;
    white-space: nowrap;
    overflow: hidden;
    direction: rtl;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
<div class="file-upload-status" style="width:200px">
<span>*</span>
   <span></span> C:\fakepath\996571_1398802860346752_2094565473_n.jpg</span>
</div>

I am seeking assistance to resolve this issue. Can anyone provide some guidance?

cssflexboxdirection

Answer №1

By removing the direction property rtl and adding the code below, I was able to solve the issue at hand:

.file-upload-status {
   border: 1px solid #ccc;
   white-space: nowrap;
   overflow: hidden; 
   display : flex; 
   flex-direction : row-reverse; 
   align-items: flex-start;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

}

Answer №2

Instead of using direction:rtl, I opted for text-align:right

 <div class="file-upload-status" style="width:200px">
    <span class="star">*</span>
       <span> C:\fakepath\996571_1398802860346752_2094565473_n.jpg</span>
    </div>


 .file-upload-status {
     text-align:right;
    border: 1px solid #ccc;
    white-space: nowrap;
    overflow: hidden;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}
.star{
float:right;
}

Fiddle: https://jsfiddle.net/mnevrs02/

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

Divs are unable to be positioned at the top of the container

I am struggling with the alignment of blocks inside a container that can be dragged and re-sized within their container. The default position should have 7 divs side-by-side at the top of the container, however, they are appearing stacked on top of each ...

jqueryhtmlcssjquery-ui

Embeddable javascript code can be enhanced by incorporating references into the header

I have developed a basic calculator application using HTML, JavaScript, JQuery, and CSS. My intention is to allow others to embed this calculator app on their own web pages by utilizing a file named generate.js. Within this file, there are several documen ...

javascriptjqueryhtmlcss

Is there a way to adjust the scrolling speed of a background image to be slower than the rest of

I'm searching for an example similar to this: Are there any efficient javascript solutions available? I've had difficulty implementing the code I've come across so far. ...

javascripthtmlcss

Toggle button to collapse the Bootstrap side bar on larger screens

I am currently utilizing the following template: An issue I am facing is that I want my sidebar to either shrink or hide when a button is clicked, specifically on a 22" PC screen. I have experimented with several solutions without achieving success. Alt ...

jquerycssangularjstwitter-bootstrap

What is the reason behind the fact that using margin: auto 0px; does not result in vertical centering of a block, whereas margin: 0px auto;

To effortlessly set the width to auto, use margin:0px, auto #container{ background-color: blue; height:600px; width:600px; margin:0px auto;} <div id="container"></div> However, why is it not possible to set the height to auto with margin:au ...

htmlcss

Steps for modifying the look of a button to display an arrow upon being clicked with CSS

Looking to enhance the visual appearance of a button by having an arrow emerge from it upon clicking, all done through CSS. Currently developing a React application utilizing TypeScript. Upon clicking the next button, the arrow should transition from the ...

cssreactjstypescripttailwind-css

What is the best way to ensure my Vue webpage completely fills the viewport?

I'm currently working on a demo web application created with Vue 3, Vue Router, and Bootstrap using Vue CLI. My main issue is that the webpage does not extend to fill the entire height of the browser window. My attempt to use bootstrap and set vh-100 ...

cssvue.jsbootstrap-4vue-routervuejs3

Inserting a picture using CSS

I attempted to include an image in a footer div, but I have not been successful with the following approach: Here is the HTML code I tried: <footer> <div class="imagenFooter" style="background-image: url(&quot;./images/footer-bg.jpg&quo ...

htmlcssbootstrap-4

Optimizing mobile page layouts with CSS

I'm putting in a lot of effort to ensure that my simple form page is optimized for mobile devices. Although the form is visible, I find myself having to zoom in quite a bit in order to read it. Here's an example: ...

htmlcssmobilemobile-website

Internal styles are effective, while external styles seem to be less efficient

For some reason, internal CSS is working fine, but external CSS just won't cooperate. I even tried using the code !important, but it's like it doesn't understand. I'm trying to incorporate a gallery into my website, but I've hit a ...

javascripthtmlcssbootstrap-4styles

adding labels to d3 elements without nesting

I need help creating HTML with tooltips and tooltip text for each <p> tag. While I know this can be achieved using d3, I am currently using a CSS approach because it feels more familiar to me. In an ideal scenario, the desired HTML output should res ...

javascripthtmlcssd3.js

Adjust the font size within the grid layout

I'm utilizing the grid system to display 7 small images with a number next to each one, just like in this example. In my initial attempt, I didn't use the grid system, which made the process quite complex and time-consuming, taking me around 60 t ...

htmlcssbootstrap-4

Guide on incorporating the <a> element within a Bootstrap button

Check out this Demo on JS Fiddle: I am having trouble adding the href attribute to these buttons. I found that it works when structured like this : <a href="/"> <button type="button" class="btn btn-default btn-custom"> <span ...

htmlcsstwitter-bootstrapbutton

How can one access a div tag within a script using Jquery?

I am faced with a challenge related to accessing the div tag "warningMessage" within my HTML code. Below is the snippet that contains this div tag under scripts: <script id="notePopup" type="text/x-kendo-template"> <p class="notePopupMessage" ...

javascriptjqueryhtmlcss

What is the best way to retrieve data from the previous webpage and navigate it to the appropriate page using HTML?

I have a pair of HTML files known as list.html and detail.html. From https://jsonplaceholder.typicode.com/posts, I am retrieving title and body data to exhibit on a posts.html page in the following format: posts.html output Displayed below is my posts.ht ...

javascripthtmlcssjsonquery-string

Unraveling the Mystery of CSS3 or JavaScript Sliders

I am currently developing a new website and I was intrigued by the slider effect on Apple and IBM's websites. For reference, you can check out how it works on sites like: and I noticed that the text and images slide in opposite directions, which se ...

javascripthtmlcssslider

Jekyll latex not displaying on the remote server, despite being visible on the local server

Why isn't the Jekyll latex showing up on the remote site but appears locally? Currently using the Jekyll minima theme. ...

htmlcssrubygithubjekyll

Large Quotation marks with an HTML/CSS design

Is there a way to style a quote using large quotation marks? I've tried various methods found online, such as using Blockquote with the :before and :after CSS styles. However, I'm running into issues with using an image within a div for responsi ...

htmlcsstwitter-bootstrapblockquote

When hovering or mousing over, the text remains stationary and does not follow the scroll bar movement within the

A method I am using involves displaying additional data on hover for a shortened header, like this: Hover behavior However, the text shifts across the page when the scrollbar is used, as shown here: Scrollbar interaction This table showcases HTML, CSS, ...

jqueryhtmlcss

Unexpected resizing of a div due to Vue animation

I'm currently working on a quiz and I'm trying to incorporate some animation effects when users navigate between questions. I've been experimenting with a fade in and out effect, but there seems to be a glitch. Whenever I click the button, t ...

htmlcssvue.jsanimationcss-animations