Tips for Utilizing CSS Overflow: Hidden to Prevent the Parent Container from Expanding

I have a fixed width column and a fluid column. In the fluid column, I want to display a string with nowrap so that it does not overflow the container. Here is an illustration of how I want the text to appear:

----------------------------------------------------------
|       |                                                |
| 200px | fluid width div fluid width div fluid width ...|
|       |                                                |
----------------------------------------------------------

However, when the text becomes too long, the container div expands to show all the text regardless of its length.

Here is my sample code: http://jsfiddle.net/Autociudad/8137gf7g/4/

HTML code:

<div class="table-layout">
    <div class="table-cell fixed-width-200">
        <p>fixed width div</p>
    </div>
    <div class="table-cell">
        <p class="text">fluid width div fluid width div fluid width div fluid width div fluid width div fluid width div fluid width div fluid width div </p>    
    </div>
</div>

CSS code:

.text {
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}
.table-layout {
    display:table;
    width:100%;
}
.table-layout .table-cell {
    display:table-cell;
    border:solid 1px #ccc;
}

.fixed-width-200 {
    width:200px;
}

Thank you.

Answer №1

It appears that the issue you are experiencing is a result of applying display:table to the container element and display:table-cell to the individual cells.

Another approach could be to use float:left for the cell with a fixed width of 200px, while eliminating the custom display properties: http://jsfiddle.net/8137gf7g/7/

.text {
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}
.table-layout {
    width:100%;
}
.table-layout .table-cell {
    border:solid 1px #ccc;
}

.fixed-width-200 {
    float:left;
    width:200px;
}

Answer №2

All that's missing is just one thing:

.content
{
display: inline-block;
width: 300px;
white-space: nowrap;
}

Answer №3

To ensure that the content within .text is hidden after a specific width, you must set an explicit width:

.text {
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
    width:100px;
}

The use of white-space:nowrap prevents the normal fluid behavior.

http://jsfiddle.net/8137gf7g/5/

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

Using jQuery to verify if an element is currently in the process of being animated

Is there a way to determine if an element is currently being animated, similar to using $(...).is(':animated')? I would like to verify this information. ...

Angular JS Troubleshooting: Application Not Functioning Properly

I've been learning AngularJS on codeSchool and I ran into an issue with my simple hello world app. It was working fine at first but then stopped completely. I can't seem to find the bug, so any help would be appreciated. Here is the HTML code: & ...

Direct your attention towards the bootstrap dropdown feature

I have encountered an issue with using a bootstrap dropdown. I need to focus on the dropdown in order to navigate through its options using the keyboard. However, my current attempt at achieving this using jQuery does not seem to be working when I use $(&a ...

The given 'FC<ComponentType>' type argument cannot be assigned to the 'ForwardRefRenderFunction<unknown, ComponentType>' parameter type

Currently, I am using react in conjunction with typescript. Within my project, there are two components - one serving as the child and the other as the parent. I am passing a ref to my child component, and within that same child component, I am binding my ...

Error: Visual Studio Code is unable to locate the module 'typegram/callback'

Currently, I am developing a telegram bot utilizing the telegraf package (version 4.1.1). Everything was functioning perfectly until I incorporated additional modules from the telegraf package such as Extra and mark-up. Unfortunately, I encountered the f ...

Modifying the value of a property in one model will also result in the modification of the same

As a beginner with Vue, I am looking to allow users to add specific social media links to the page and customize properties like text. There are two objects in my data - models and defaults. The defaults object contains selectable options for social media ...

Guide to sorting data by the status value within a JavaScript object?

I have a JavaScript object structured like this: { "3": { "id": 3, "first": "Lisa", "last": "Morgan", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd7d6d4c9dcdad5fbdcd6dad2d795d8d4d6">[email&# ...

converting code from JavaScript to Flask and then back to JavaScript, all within a single-page application

In order to make my single-page web app fully functional, I have completed the following tasks: Sent a json from .js to Flask (COMPLETED) Ran the input through a Python function called getString() and obtained a string output (COMPLET ...

What is the method for retrieving the Java List containing custom class objects defined within the <s:iterator> tag in a JSP file from within my JavaScript function?

Within my jsp file, I am retrieving a List of objects from my java action class (struts2) and displaying them. Now, I need to access these list objects within my javascript method. How can I achieve this? The code in mycode.jsp: <script type="text/jav ...

The propagation of onClick events in elements that overlap

Having two divs absolutely positioned overlapping, each containing an onClick handler. The issue is that only the top element's onClick handler fires when clicked. React 17 is being used. Here is some sample code: <div style={{ position: "abs ...

prettyPhoto popup exceeds maximum width and height limitations

I am currently using the most up-to-date version from No Margin for Errors and I have set allow_resize to true. However, the size of the display is still too large. Is there a way to set a maximum width/height? I have already configured the viewport as fo ...

I am experiencing some layout problems with Joomla K2

Having some alignment issues in the header section of my article. I took a screenshot, but you can also check out the live page here. See the pic below: Upon inspecting the area I wanted to adjust, I discovered: span.itemAuthorDetailss position: relativ ...

Tips for structuring route dependencies in Node.js and Express

Although I have a good grasp of exporting routes to an index.js file, my struggle lies in properly referencing external route dependencies without having to copy them to the top of the file. For instance, if I have the main entry point of the program (ind ...

Getting the selected value from a dropdown menu in ReactJS

I am working on creating a form that resembles the following structure: var BasicTaskForm = React.createClass({ getInitialState: function() { return { taskName: '', description: '', emp ...

Delay the jQuery event handler for a few milliseconds before triggering

I'm currently working on a navigation menu, but I've encountered some bugs and I'm struggling to fine-tune it completely. Here are the issues I'm facing, and any help or solutions would be greatly appreciated. The menu items (About ...

What is the method for transmitting a concealed attribute "dragable" to my component?

Currently, I have successfully integrated a here map into my project, but I am now tackling the challenge of adding draggable markers to this map. To achieve this, I am utilizing a custom package/module developed by my company. This package is designed to ...

Steps for modifying the CSS class of an <a> tag with Jquery/Javascript

I am attempting to dynamically change the class of a tab on the dashboard based on the selected page. In the dashboard, there are 3 tabs: <div> <ul class="menu"> <li class="MenuDashboard"><a href="#" >Dashboard</a&g ...

Generate an array of responses within a child component and then send this array to the parent component using Vue.js 2

Currently, I am in the process of creating a survey using Vue 2. My goal is to construct and emit the answers array to a parent component named Evaluation. You can view the structure of this array here: https://pastebin.com/rLEUh56a Within my project, the ...

Three.js object changing position along the curve of a bowl

I am currently developing a threejs game. My goal is to have a ball move from the z-position of -5000 to 0. This is how I am creating the mesh: let geometry = new THREE.SphereGeometry(100, 32, 32); let material = new THREE.MeshBasicMaterial({ ...

Style the CSS exclusively to the expanded menu section

I need help with applying CSS rules to my navbar menu without affecting the collapsed menu. I came across a solution here and tried using this code: @media (min-width: 980px) { /* your conditional CSS*/ } However, the issue arises when my browser win ...