What exactly is the mechanism behind how the text-overflow property's fade value operates?

I am struggling to add a one line description to each flex-child using the fade() value, but it seems to not be working as expected.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
}

.flex-child {
  border: 1px black solid;
  width: 40%;
  max-height: 3rem;
  padding: 10px;
  margin: 5px;
  overflow: hidden;
}

.flex-child p {
  font-weight: bold;
  font-size: 1rem;
  overflow: hidden;
  text-align: justify;
  white-space: nowrap;
  text-overflow: fade(10%);
}
<div class="flex-container">
  <div class="flex-child">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </div>
  <div class="flex-child">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </div>
</div>

I am expecting the text to fade and become transparent. Is there a misunderstanding with the value used?

htmlcssflexboxfade

Answer №1

fade is currently in the "testing phase" and is not yet fully compatible with all browsers.

Instead of using fade, you can create a pseudo-element within your flex-item elements that overlays the text and features a background gradient.

Don't forget to include pointer-events: none; so that the text underneath remains selectable.

If you need to adjust the gradient size, simply modify the width value within .flex-item::after.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: row;
}

.flex-child {
  border: 1px black solid;
  width: 40%;
  max-height: 3rem;
  padding: 10px;
  margin: 5px;
  overflow: hidden;
  position: relative;
}

.flex-child::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 10px; /* match parent padding-right */
  height: 100%;
  width: 100px;
  background-image: linear-gradient(to right, rgba(255,255,255,0), white);
  z-index: 2;
  pointer-events: none;
}

.flex-child p {
  font-weight: bold;
  font-size: 1rem;
  overflow: hidden;
  text-align: justify;
  white-space: nowrap;
}
<div class="flex-container">
  <div class="flex-child">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </div>
  <div class="flex-child">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </div>
</div>

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

Tips for animating input width as the size value changes during an ajax query transformation

This is my JavaScript code: function updatePriceDisplay() { $.ajax({ url:"query.php?currency=<?=$currencycode;?>" }).done(function(data) { $("value").attr("value", data).attr("size", data.length - 2); }); } updatePriceDi ...

javascripthtmlajax

Unable to select the initial element

Having trouble targeting the first child in this code snippet. I've tried various methods but nothing seems to be working. Any suggestions on how to resolve this? <div id="main"> <div class="page"> <p>random 1</p> </div ...

jqueryhtmlcssaddclasschildren

Material UI allows for the creation of numbered lists with ease. This

<List> {instructionList.map((el) => ( <ListItem divider key={el.id}> {el.type === 'number' ? <React.Fragmen ...

javascriptcssreactjsmaterial-ui

What is the best way to position a box in the center using CSS?

I have constructed a container using div and included 4 additional div elements inside: HTML: <div className='main__container'> <div className='item'>Image</div> <div className='item'>N ...

htmlcssreactjs

Disruption of HTML file content

When I open my HTML file directly, the entire content appears messed up. However, when I view it through live preview in Brackets, everything looks fine. What could be causing this issue? Keep in mind that I am using CSS and JavaScript files from Bootstr ...

htmlbootstrap-4

What could be causing the DIV elements to not align side by side?

<div id="dvFirst" class="mainSecond" style="background: #6FA5FD;"> <div id="leftdiv3" class="leftdiv">Client: </div> <div id="rightdiv3" class="rightdiv"><asp:DropDownList ID="ddlCliNewMsg" AutoPostBack="t ...

htmlcssasp.net

I experienced issues with the brackets software freezing up while using the Bootstrap min CSS file

Recently, I've been using brackets as my text editor and have run into an issue with the bootstrap.min CSS file. For some reason, it keeps freezing whenever I try to load it in brackets. Oddly enough, HTML files work perfectly fine, but ...

cssadobe-brackets

Is there a way to achieve a double background color effect in CSS while ensuring that the text is centered within the second background color element?

How can I achieve a layout similar to the one shown in this image: ul menu li tags Should I use two tags for each element? Here is an example: <ul class="menu"> <div class="outside"><li class="inside"><a href="#">Firefox</a ...

htmlcsshtml-listsmenuitem

Numerous HTML forms for submission

How can I distinguish between different forms and submit buttons that are directed to a specific php function? On my current page, I have two forms but each submit button triggers different actions. I attempted to use ISSET to manage the submit actions, ...

phphtml

Use Javascript to display an image based on the date, otherwise hide the div

I'm looking to implement an image change on specific dates (not days of the week, but actual calendar dates like August 18th, August 25th, September 3rd, etc). Here's the div I'm working with: <div id="matchday"> <img id="home ...

javascripthtmlcss

Creating a perfectly centered card using Bootstrap 4, both horizontally and vertically

I'm struggling to vertically center a card (or container). Although I can center it horizontally, the vertical alignment is proving to be difficult. Despite trying out various code snippets from Stack Overflow and other websites, none of them seem to ...

htmlcssbootstrap-4

Inverted CSS Shadow Box

I thought I had a good grasp on how CSS shadow-box works, but it seems I was mistaken. Could someone provide me with a visual explanation of why the <hr/> looks the way it does here? Take a look at style 13: https://codepen.io/ibrahimjabbari/pen/ozi ...

css

CSS hover effect: altering background colors of both parent and child elements simultaneously

HTML: <div class="container"> <div class="parent">one <div class="child">two</div> </div> </div> CSS: .parent { background: red; height: 200px; width: 200px; } .child { back ...

htmlcsscss-selectors

placing one SWF file above another

Is it feasible to layer multiple SWF files on top of one another directly? I have been experimenting with divs and different z-index values, but I am unsure about how the Flash player comes into play. Is my assumption correct that each SWF has its own indi ...

htmlcssflash

Instead of displaying a regular text box, the output unexpectedly shows "Printing [object HTML

There are some HTML and JavaScript files that I have. I've written some functions in my JavaScript file to save the values of different input fields. However, when I try to print the description, it just displays [object HTMLInputElement]. This mak ...

javascripthtml

The integration of a side panel with a chrome extension is experiencing issues

I am working on a chrome extension with the following functionalities - Extract URL path from a specific webpage. (The webpage's URL remains constant) Open this URL in a new tab. It can be either http:// or https://. Embed an iframe containing a sim ...

javascripthtmlgoogle-chrome

an online platform design

I am currently working on building a webpage, but I am facing some issues with the layout. Specifically, I am unable to make the div automatically adjust its size (particularly the height). Here is the code that demonstrates the problem: <!DOCTYPE html ...

htmlcss

JavaScript Issue Causing Jquery Carousel Dysfunction

I am having trouble with the slider I created using JS Fiddle. The link to the slider is not working and I need some assistance. Click here for the slider <div class="row"> <div id="myCarousel" class="carousel slide vertical"> &l ...

javascriptjqueryhtmlcss

Issues arise when trying to use JQuery in conjunction with JSON data

I've been working on a project that involves creating a dynamic dropdown list, but I've run into an issue with jQuery and JSON. This is my first time working with JSON, so I'm still getting the hang of it. Despite googling for solutions, I h ...

jqueryhtmljson

The icon displays correctly in Firefox but is not visible in IE

link REL="SHORTCUT ICON" HREF="/images/greenTheme/favicon.ico" type="image/x-icon" While this code functions properly in Firefox, it appears to be causing issues in Internet Explorer. Can anyone provide guidance on how to resolve the compatibility issue w ...

javascripthtmlcss