Tips for concealing the CSS style of a descendant span element when the parent div employs text-overflow: ellipsis

Is it possible to prevent the green background of a child span from showing when the parent span has text overflow ellipsis applied?

.container {
  border        : 1px solid black;
  max-width     : 100px;
  overflow      : hidden;
  text-overflow : ellipsis;
  white-space   : nowrap;
}

.backgroundColor {
  background-color : green;
}
<div class="container">
    Lorem ipsum
    <span class="backgroundColor">should not be visible</span>
</div>

How can I achieve my goal of preventing the green background of the descendant span from being visible in this scenario?

htmlcss

Answer №1

To make a span behave as a single block or character, you can reset its display property to inline-block. This will prevent it from spanning across multiple lines and keep it hidden if there is not enough room.

.container {
  border: 1px solid black;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.backgroundColor {
  background-color: green;
  display:inline-block
}
.aa {
 
  max-width: 200px;
  }
.bb {
  
  max-width: 240px;
  }
<div class="container">
  Lorem ipsum
  <span class="backgroundColor">should not be visible</span>
</div>
<div class="container aa">
  Lorem ipsum
  <span class="backgroundColor">should not be visible</span>
</div>
<div class="container bb">
  Lorem ipsum
  <span class="backgroundColor">should not be visible</span>
</div>

Answer №2

Uncertain of the purpose of the span, I am hesitant to recommend adding a left margin to it. Consider this alternative approach:

.container {
  border        : 1px solid black;
  max-width     : 100px;
  overflow      : hidden;
  text-overflow : ellipsis;
  white-space   : nowrap;
}

.backgroundColor {
  display: inline-block;
  margin-left: 10px;
  background-color : green;
}
<div class="container">
    Lorem ipsumm
    <span class="backgroundColor">should not be visible</span>
</div>

Answer №3

The issue you're facing is that the max-width property is set too large. It's recommended to use relative length units for a scalable layout with your text. To illustrate, if you change it to 5em, here is how it will look:

.container {
  border        : 1px solid black;
  max-width     : 5em;
  overflow      : hidden;
  text-overflow : ellipsis;
  white-space   : nowrap;
}

.backgroundColor {
  background-color : green;
}
<div class="container">
    Lorem ipsum
    <span class="backgroundColor">should not be visible</span>
</div>

If you have the flexibility to modify HTML code, a possible solution resembling what you want can be achieved using the details/summary tags as shown below:

details {
  border: 1px solid black;
  display: inline-block;
  background-color: green;
}

summary {
  display: inline-block;
  background-color: white;
}

summary:after {
  content: " ...";
}
<details>
    <summary>Lorem ipsum</summary>
    should not be visible
</details>

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

How can I stick the footer to the bottom of the page?

I've tried numerous codes in an attempt to make the footer stay at the bottom of the page, however, none of them seemed to work. Here's my footer tag: <footer class="container py-5 navbar-fixed-bottom"> The following div is: <di ...

htmldjango-templatesfooter

Is it feasible to create a full-page text gradient clip without it repeating on each individual element?

.gradient { background-color: #00ccaa; background: linear-gradient(0deg, #00ccaa, #f530a9); background-size: cover; background-clip: text; box-decoration-break:slice; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -web ...

htmlcssgradientcss-gradientsbackground-clip

extracting the value of a chosen radio button in AngularJS using HTML

When attempting to retrieve the selected value from a radio button, I am encountering an issue where choosing "teacher" still shows as "student." Here is the HTML file: <!DOCTYPE html> <html ng-app="phase2"> ... (HTML code continues) Rige ...

javascripthtmlangularjsradio-button

Is there a glitch or a misinterpretation of the specifications concerning the use of relative padding

VIEW DEMO At times, I like to create a square (or any rectangle) that maintains its ratio regardless of size, using a technique similar to this method. My Objective: To prevent the square from extending beyond the viewport on devices with limited heigh ...

cssviewport-units

iOS devices are experiencing issues with touchstart and touchend events not functioning when utilizing jquery mobile and cordova

During a previous project, I encountered no problems with the following code snippet. It effectively utilized touchstart and touchend events to adjust the CSS of a button: <script> $('input[type="button"]').on('touchstart', func ...

javascriptjqueryioscsscordova

One of the unique CSS properties found in the NextJS setup is the default 'zoom' property set to

Even though I already found a solution to the problem, I can't help but wonder what the author meant by it. Hopefully, my solution can help others who may encounter the same issue. After installing the latest NextJS version 13.2.4 on my computer, I e ...

cssreactjsnext.js

Spree Deluxe - Customizing color scheme variables

We're struggling to modify the color variables in Spree Fancy. The documentation suggests creating a variables_override.css.scss file. But where exactly should this file be placed? We've tried adding it under the stylesheets folder in assets and ...

cssruby-on-railssassspree

Angular provides a variety of functionality to control the behavior of elements in your application, including the

I have a page with Play, Pause, Resume, and Stop icons. When I click on the Play icon, the Pause and Stop icons are displayed. Similarly, I would like to show the Resume and Stop icons when I click on the Pause icon. I need help with this code. Thank you. ...

htmlangulartypescript

What is the best way to ensure that all inner divs occupy the full height of their parent div?

I am seeking a solution to make all child divs fill the full height of the parent div without specifying a fixed height. Ideally, I would like them to adjust to the height of the tallest child div. However, if the only way to achieve this is through JS, I ...

htmlcss

The width property in Bootstrap is not functioning properly in .NET Core 6

I've exhausted all my options, including documentation and the last 10 stack overflow answers, but nothing seems to be working. I even tried using: <meta name="viewport" content="width=device-width, initial-scale=1"> I attem ...

htmlcssasp.net.netmodel-view-controller

Is checking for an email address in a form necessary?

I am currently in the process of creating a coming soon page. I have included a form on the page where users can sign up using their email addresses, which are then sent to me via email. However, I need assistance in determining how to verify that the in ...

phpjavascriptjqueryhtml

The HTML marquee element allows text to scroll sideways or

Has the html marquee tag been phased out? If so, what are the current alternatives available for achieving a similar effect on modern browsers? I am looking to implement a basic marquee effect on my Joomla page. ...

html

Increase the height of a div dynamically in HTML during program execution

Within my datagrid, there exists an expandable/collapsible section above the content (see Picture 1 https://i.sstatic.net/N68Rl.png). Upon expanding the content, a scroll bar appears within the datagrid element to display the data (see Picture 2 https://i. ...

htmlcssasp.net

Troubleshooting problem with AngularJS and jQuery plugin when using links with # navigation

I have integrated a specific jquery plugin into my angularjs single page application. The primary block can be found in the following menu: http://localhost:81/website/#/portfolio This menu contains the following code block: <li> <a href=" ...

javascriptjqueryhtmlangularjs

"Enhance your website with a dynamic hover effect and striking letter spacing in

In the div below, there is a span with the following code: <div class="mission-button"><span class="mission">view our mission</span></div> Accompanied by this CSS: .mission-button::before { content:'&ap ...

htmlcss

JavaScript causing values to disappear when the page refreshes

When a user hovers over ImageButtons, I use Javascript to change the ImageUrl. However, on submitting the form, the updated ImageUrl property is not reflected in the code behind. Similarly, I also dynamically update a span tag using Javascript, but its alt ...

javascriptjqueryhtmlasp.netvb.net

Harnessing the Power of Material UI to Revolutionize Amplify Theming

I am currently developing a React application with Material-UI and Amplify UI Components. I am looking to customize the Amplify theming. By following the guidance provided on Amplify UI Components Customization, I have been able to override CSS variables ...

cssreactjsmaterial-uiaws-amplify

Add HTML content dynamically to a layout that is connected to a controller

While I may not have the proper heading for this question, I need to add this piece of HTML dynamically to my layout and attach its click events with a controller. <div id="subscriber1" class="participant-video-list"> <div class="participant- ...

htmlangularjscontrollerbind

How can I ensure that my image remains responsive and aspect ratio-friendly?

Is there a way to accomplish this magical effect? I find myself in a similar situation. I require an image that remains centered while adjusting to fit the screen, all while maintaining its aspect ratio. ...

htmlcssimageaspect-ratio

PHP MySQL query is causing multiple rows to be updated in the database

My goal is to update the quantity and price in two tables: Invoice and Order_Table. The updates should only apply to a specific OrderID. Here's my attempt: $UpdateQuant = "UPDATE Order_Table SET Quantity = '$NewQuant' WHERE OrderID = ' ...

phphtmlmysqldatabase