Ellipsis paired with divs for children

Below is the HTML code which is also linked to a Bootstrap popover:

<div class="event" style="top: 0%; width: 100%;">
  <span class="test">Layouts</span>
  <div class="value">
    test
  </div>

  <span class="test">Starts</span>
  <div class="value">2014/12/12, 11:00</div>

  <span class="test">Ends</span>
  <div class="value">2015/1/16, 00:00</div>
</div>

Here's the corresponding SCSS:

& > div.event {
        // position: absolute;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background-color: rgba(41, 128, 185,.7);
        outline: 1px solid rgba(155, 89, 182,1.0);
        min-height: 30px;
        color: white;
        // width: 100%;
        height: 30px;
        padding: 5px;
        z-index: 1;

        font-size: 0.7em;
        .test {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          float:left;
          // text-transform: uppercase;
          font-weight: 200;
          padding: 0;
        }

        .value {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          float:left;
          color: rgba(255,255,255,0.5);
          margin-bottom: 5px;

          i.fa-external-link {
            cursor: pointer;
            line-height: 23px;
          }
        }
        .value, .test {
          padding-right: 5px;
        }

The issue I am facing is that when I reduce the size of the '.event' container (let's say to 5%), the text gets cut off and I want it to show as ellipsis instead. I have tried using 'overflow:hidden' with 'white-space:nowrap' and setting 'text-overflow', but it doesn't seem to work. Am I missing something obvious? Let me know if you need more HTML and CSS for further analysis.

Here's a Fiddle demonstrating the problem: http://jsfiddle.net/q1go1471/2/

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

From my understanding, in order for text-overflow: ellipsis to function properly, a width must be specified.

Simply adjust this code and it should solve the issue:

.value, .test {
    padding-right: 5px;
    width: 30px;
}

Check out JSFiddle for demonstration: http://jsfiddle.net/Ljo2eco9/

UPDATE:

If you want only one ellipsis at the end, use display: inline; instead of float: left for your child elements.

.test {
    font-weight: 200;
    padding: 0;
}

.value {
    color: rgba(255,255,255,0.5);
    margin-bottom: 5px;
}

.value, .test {
    padding-right: 5px;
    display: inline;
}

JSFiddle with updated code: http://jsfiddle.net/Ljo2eco9/1/

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 text enclosed by a span located inside a div and identified by xpath

I am struggling to extract text from a span nested within another text in a div (highlighted in the image). https://i.sstatic.net/8uIWz.png This snippet of code is relevant ... <div id="groupBlock3"> <div class="groupBlockTitle& ...

htmlxpath

Enhance scrolling with a bounce effect

My goal is to implement a smooth scrolling experience with a bounce effect when the user over-scrolls, meaning they scroll too much to the top or bottom. I found an answer on Stack Overflow that explains how to achieve smooth scrolling, but I also want to ...

javascriptcss

How to execute a function *after* another function has finished running in Javascript upon page load?

I am currently using scrollsaver.js to maintain scroll positions of elements after postback. However, I have encountered difficulties in resetting the scroll position when needed. Specifically, when paging through a list, I want the scroll position to res ...

javascriptjquery

Adjusting the width of a select box to match the size of its child table using CSS

Within my Vue application, I've implemented a select box that contains a table component. When the select box is clicked, the table becomes visible in a container. However, I'm facing an issue where I can't dynamically adjust the width of th ...

javascripthtmlcssvue.js

How to execute a JavaScript function within PHP code

Hey there, seeking some assistance. On my main page index.php, I have a simple js function named function1() that opens test.php as a pop-up window when clicked. The content in this pop-up window comes from another page called p1.php. Now, I need to set it ...

javascriptphp

Steps to trigger a JavaScript popup from an iframe window to the parent window

Currently I am developing a web application using JSP with JavaScript. Within the parent window, an iframe is being utilized. The issue arises when a button in the iframe page is clicked, as it opens a popup window within the iframe itself. However, my obj ...

javascripthtmljsp

Using jQuery to update elements with the same class in HTML

This morning, I stumbled upon a rather perplexing issue. Despite my attempts to find a solution on SO, all I came across were methods involving data loading into HTML or a complete page refresh. My aim is to utilize jQuery's $.ajax function to update ...

jqueryhtmljsonajaxangularjs

Adding dynamic elements to a pop-up window with the use of jQuery's .load() function

When implementing Javascript to create a modal, I have encountered an issue where the close button disappears. The modal opens and loads different HTML files dynamically using the jQuery load() method, but the close button vanishes. I suspect that the mod ...

javascriptjqueryhtmlajaxdom

Is there a way to display the entire stack trace in Mocha when testing Promises and an error occurs?

Imagine I have a small specification like this: describe("feature", () => { it("does something", () => { return myPromiseBasedFn().then(result => { expect(result).to.eql(1); }); }); }); At the moment, when the promise is reject ...

javascriptnode.jstestingnpmmocha.js

Exploring keypad.js and the use of serialization in conjunction with $.post

Currently delving into the realm of jQuery as I work on a website for employees. The goal is to grant entry through a unique keypad code assigned to each employee. However, my progress hit a snag when I stumbled upon this script and struggled to get it to ...

jqueryserialization

What is the best way to retrieve a return string from an external program using XPCOM in Firefox?

Is there a way to execute an external program in XPCOM and retrieve the actual return string from it, instead of just the return code? I have researched nsICommandLine, nsICommandLineHandler, nsICommandLineRunner, and nsIProcess but it seems like none of ...

javascriptfirefoxfirefox-addonxulxpcom

Navigate to a local server running on localhost:3000 and access the external URL www.google.com

When attempting to access an external URL, the website that should open in a new tab is redirecting to http://localhost:3001/www.google.com instead of www.google.com. <IconButton key={index} size="large" color="primary" href={e.url ...

javascripthtmlcssreactjslocation-href

Attempting to bring in an image file into a React component

My attempt to add an image at the top of my file failed, so I am looking for help with importing it. The code I originally tried did not work. The image does not display using the code below <img src={require('../../blogPostImages/' + post.bl ...

javascriptreactjsimageimportimporterror

Obtain an ASP.NET Label control with the use of JavaScript

I am experiencing difficulty obtaining the id of a label control named tb_TA_2_6 within a form view using JavaScript. I have attempted the following: <script type ="text/jscript" language= "javascript" > function autosum(t1, t2) { var sum; var a = ...

javascriptasp.netlabel

What can Cordova and express js bring to the table together?

I'm feeling pretty lost when it comes to displaying express views in a Cordova app client. It seems like the app would have to send a GET request and then the express application would render the view. But I'm unsure about how to actually make t ...

javascriptnode.jsexpress

PHP server-side detects empty AJAX post requests

I am encountering an issue while making an AJAX request to a PHP controller using jQuery ajax. The problem arises when attempting to access the posted data in PHP, as the $_POST variable is empty. Below is the function causing the trouble: function GetSer ...

javascriptphpjqueryajaxpost

Find any consecutive lowercase or uppercase letter and include one more

I have a task in Javascript that I need help with. The goal is to insert a special character between a lowercase and uppercase letter when they are matched together. For example: myHouse => my_House aRandomString => a_Random_String And so on... T ...

javascriptregextypescript

Empty nested Map in POST request

I am currently working on a springboot application with a React/Typescript frontend. I have defined two interfaces and created an object based on these interfaces. export interface Order { customer_id: number; date: Date; total: number; sp ...

javascriptjsonreactjstypescriptfetch

Troubleshooting lack of error responses from Backend RestAPI with Axios

I am currently facing an issue with receiving a response from my backend system (Node.js Express RestAPI). exports.send = function(req, res) { console.log("sent function running!") let contact = new Contact(req.body) contact.send() ...

javascriptnode.jsexpressaxios

Guide: Implementing Vuex store within a plugin

I recently developed a custom Vue plugin which includes a customized instance method import Echo from 'laravel-echo'; import Vue from 'vue'; import config from '@/config'; const echor = { install(Vue){ Vue.prototy ...

javascriptvue.jsvuejs2vuex