Why is the CSS property text-overflow: ellipsis not working on a child div with the class name cluster-name?
.ft-column {
flex-basis: 0;
flex-grow: 1;
padding: 4px;
text-overflow: ellipsis;
overflow: hidden;
}
.ft-column > .cluster-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<div class="ft-column">
<div>Cluster</div>
<div class="pull-left cluster-name">FQDN</div>
</div>It is important to set the width of the parent div in order to activate the styling when the child element overflows. Although giving width to the child div is possible, it can be more challenging to manage as the parent div acts as the container. Therefore, it is recommended to focus on managing the parent div.
.ft-column {
flex-basis: 0;
flex-grow: 1;
padding: 4px;
width: 20%;
}
.cluster-name{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}<div class="ft-column">
<div>Cluster</div>
<div class="pull-left cluster-name">FQDNsaxaxasxsaxsaxasxvfdvdvfvdfvfd</div>
</div>To improve your CSS layout, I suggest making the following changes by specifying the width for the child element.
.ft-column {
flex-basis: 0;
flex-grow: 1;
padding: 4px;
text-overflow: ellipsis;
overflow: hidden
}
.ft-column > .cluster-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100px;
}<div class="ft-column">
<div>Cluster</div>
<div class="pull-left cluster-name">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>.ft-column
{
flex-basis: 0;
flex-grow: 1;
padding: 4px;
text-overflow: ellipsis;
overflow: hidden
}
div.cluster-name {
white-space: nowrap;
width: 2em;
overflow: hidden;
text-overflow: ellipsis;
}<div class="ft-column">
<div>Cluster</div>
<div class="pull-left cluster-name">FQDN</div>
</div>Set the width property for .cluster-name then test if the code "text-overflow: ellipsis;" works by applying it now
My form has two inputs - one for text input and the other for submitting, like a button. I have added an icon to the submit button and want it to change when clicked. <input class="searchBtn" id="submit" name="submit" type="submit" value=""& ...
Here is the HTML code snippet: <div class="homepage-body"> <a href="#"> <div class="homepage-item"> <div class="homepage-icon"></div> <div class="homepage-text"> Test1 </di ...
I recently created a new component named MyComponent.razor and included a corresponding CSS file called MyComponent.razor.css. The CSS file is nested under the component file in Visual Studio, so I am confident there are no spelling errors in the file path ...
The issue I am facing is that the background color of the <ol> list is not showing correctly. This problem arose after I floated the label to the left and the input to the right. How can I resolve this? The desired outcome should be: My current resu ...
I am in the process of creating an intranet site for my company, and one of its functionalities is to store a database of files along with their locations as provided by users. The files are located on a network drive, and those accessing the database shou ...
Recently, I added a couple of Jquery scripts in my header to handle the fading in of a specific CSS class and scrolling down another one. Both of these classes are initially set to display: none in CSS, with Jquery responsible for making them visible. Here ...
I'm encountering difficulties when trying to upload a file using nodeJS and Angular. I've come across some solutions, but they all involve Ajax which is unfamiliar territory for me. Is there a way to achieve this without using Ajax? Whenever I ...
Recently, I came across a piece of JavaScript code that accesses HTML elements using the shorthand elementID.innerHTML. Surprisingly, it worked perfectly fine, but interestingly, most tutorials opt for the traditional method of using document.getElementByI ...
I have a collection of images that display perfectly in Gmail, but when viewed in Outlook, all five images appear within a single <tr> and cause the table width to expand. My desired layout is to have the first four images centered on the first line ...
When viewing a website in Landscape mode, everything looks good. However, switching to Portrait mode displays the message "Screen size not supported." I decided to test this on my desktop browser and discovered that adjusting the initial-scale:1 to initial ...
Utilizing the DataTable javascript tool to export a grid, I have obtained the following HTML generated code: <div class="DTTT_container"> <a class="DTTT_button DTTT_button_copy" id="ToolTables_example_0" tabindex="0" aria-controls="e ...
My aim is to increase the size of form fields when the cursor focuses on them, either through a mouse click or by tabbing using the keyboard. By utilizing document.activeElement focus, I can identify when the user clicks inside a text input or selects an ...
After successfully receiving data from the input field and sending it to the database, everything seems to be working fine. However, when attempting to retrieve the data after sending it to the database, an error is encountered: [object HTMLInputElement]. ...
I've been attempting to clone and drop a draggable object at the exact position within a droppable area where the drop event takes place. While I have come across examples online that demonstrate appending draggables to droppables, they all tend to re ...
Here is an example: <div style="SET IMAGE ATTRIBUTES HERE!"> <img src="http://somesite.com/someimg.jpg"><br /> <img src="http://someothersite.com/someotherimg.jpg"><br /> ... </div> With my dynamic ASP.NET ...
Trying to update specific strings within an HTML document or element. How do I go about parsing and replacing them? To clarify: - Identify all instances of #### in element .class - Swap them out with $$$$$ Currently utilizing jQuery for this task. Appre ...
My confusion lies in the fact that this code snippet works: .grid { display: grid; grid-template-columns: repeat(4, min-content); } Whereas this one does not: .grid { display: grid; grid-template-columns: repeat(auto-fill, min-content); } I am ...
Can three border-bottom styles be applied to a single div element? This is the desired appearance: ...
Currently facing a dilemma using the noUiSlider plugin. I have set up a time range picker starting from 6 am to 6 am the following day. Everything works smoothly until it reaches 23:59, but I need it to display 1:00, 2:00 instead of 25:00, 26:00 for the ...
Trying to figure out the best method for moving game characters in my JavaScript game - should I go with window.webkitRequestAnimationFrame or stick with setInterval? Any advice is appreciated! ...