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
I am currently working on a project that involves creating a tiled interface with responsive tiles. One issue I have encountered is that all the tiles are shifting to the left side of the div and not getting centered, no matter what I try. To see the pro ...
I am currently facing an issue where I am trying to insert images with JavaScript attached to them. Oddly enough, it seems to work fine on Firefox but the images or icons do not display on Internet Explorer. This is how I have written the code: <a hre ...
If the project is in a right-to-left language (such as Persian or Arabic), which method is preferable for setting text-align: right and direction: rtl? Option 1: Implement globally, for example: body * { direction: rtl; text-align: right; } ...
As a beginner in the world of CSS and HTML, I encountered an issue where my background image is not showing up. Here's the code snippet that I have: ... <style type="text/css"> #header_contain{ width:935px; height: 135px; ...
Currently, I am in the process of learning how to utilize Angular (1.3.10). My objective is to create two input fields that will specify the suit and value for a hand of playing cards. In my attempts to achieve this, I have encountered an issue. When I man ...
I am having trouble with creating a webpage. I have designed a website but I am struggling to get it right. I have included my HTML and CSS code below. What I am trying to achieve is a header at the top, followed by several sections containing a photo on ...
What is the most efficient way to implement both dark and light themes in my Vue app? One option is to create a 'dark.scss' file and use the '!important' property to override styles defined in components. Another option is to utilize pr ...
I am looking to enhance my website by incorporating text in the foreground and background images on my webpages for SEO purposes. Can anyone recommend the most effective HTML/CSS approach to achieve this? Currently, I am facing compatibility issues with I ...
Attached is an image that I would like to design in HTML. It has been quite successful, but when testing it on different resolutions, the red box seems to move around. The design was created with 100% width and height. <style type="text/css"> ...
I am currently experimenting with HTMLParser to extract and print only the contents enclosed in "p" tags from an HTML document, excluding any other content within different types of tags. from HTMLParser import HTMLParser class MyHTMLParser(HTMLParser): ...
I'm trying to achieve a similar effect like the one shown in this website (you need to scroll down a bit to see the divs sliding in). Although I'm not very proficient in JS, I was able to create a code that makes the divs fade in from 0 opacity ...
I have inserted an image directly into my HTML code, which serves as a small profile picture. I am attempting to position this image in the top right corner of my website, but no matter what CSS property I apply, the image refuses to budge. body { fon ...
My current project involves generating a report to be sent via email, with Outlook being the mandatory application in our system. The report's content is HTML-based and utilizes a table layout. Part of the content needs to appear right-aligned within ...
I'm currently working with this CSS code: input:checked + .selectablelabel .check { visibility: hidden; } Now, I want to change the visibility property to "visible" using JavaScript. I attempted the following: $(document).on('click', & ...
Whenever I resize my webpage window, the elements start to pile on top of each other and it looks disorganized. For example, when I reduce the window size, YouTube just cuts off everything instead of stacking the images. How can I achieve a similar effec ...
I've been working on a new project that utilizes knockout js. The main issue I'm facing is with setting up a table to display images and information from a form, being stored in an observable array. Each image is wrapped in an anchor tag, and the ...
I need assistance with my login form that is appearing in a Bootstrap modal. The modal I am using is the standard size, not the larger one. In the form, there are 2 input fields and a login button on the left side, while the right side should contain other ...
Although there are countless questions addressing this particular issue, allow me to provide more details: The Dilemma The situation is as follows: aside { display: inline-block; } section { display: inline-block; margin-left: 2em; } Here, the eleme ...
Hello, I am trying to create an infinite carousel effect for my images. Currently, I have a method that involves restarting the image carousel when it reaches the end by using the code snippet progress = (progress <= 0) ? 100 : 0;. However, I don't ...
I am looking to protect the full content of my blog posts and allow access only to subscribed members. I want readers to see just a glimpse of the article before it disappears, prompting them to take action with a Call to Action (CTA) like in the fading te ...