https://i.sstatic.net/IYafA.png
Is there a way to detect if the content of the fourth td overflows from the second td?
I am looking for a method to determine which td has overflowed text and identify which td's text is overflowing.
What approach can be used to determine which td is causing overflow in another td?
You can find an example on this fiddle
Thank you in advance.
Upon reviewing your code, I noticed that the overflow was not displaying as ellipsis on your fiddle. It is generally not recommended to display overflow text and check if a td container contains other td content. To resolve this issue, you can try implementing the following code snippet:
table{
border-collapse: collapse;
table-layout:fixed;
width:500px;
}
td{
border: 2px solid black;
width:25%;
height:20px;
padding:0px;
}
td > div{ /* ADDED */
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;
}<div>
<table>
<tr>
<td></td>
<td>
<div>Second cell text overflow to Third cell</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>Important Note:
To ensure the text-overflow property works properly, I included a div element inside the td element since it does not directly apply to td elements.
Revised Response
Originally, the solution addressed adjacent cells. To identify and gather all potentially impacted cells, a new methodology is suggested. It should be noted that this function is designed for cells of equal dimensions. If handling varying cell sizes is required, adjustments to the calculation of affected cells will be necessary.
$(function(){
var self, index, affectedCells;
// iterate through all cells...
$('td').each(function() {
// check if the cell's text is too long....
if(this.scrollWidth > $(this).outerWidth()) {
// when the text in the cell is too long...
self = $(this);
self.addClass('has_overflow');
// obtain current index
index = self.closest('tr').find('td').index(self);
// determine the number of affected cells
affectedCells = Math.ceil(this.scrollWidth / self.outerWidth()) - 1;
// highlight all affected cells...
for(var i= 1; i <= affectedCells; i++) {
self.closest('tr')
.find('td:eq('+(index+ i)+')')
.addClass('is_overflown');
}
}
});
});
The updated version can be found in this revised fiddle.
To enhance the readability, it is advised to eliminate white-space:nowrap; from the CSS.
Instead, utilize the following CSS for 'td' elements:
td{
border: 2px solid black;
-webkit-user-select:none;
width:25%;
height:20px;
overflow:visible;
text-overflow:ellipsis;
padding:0px;
}
Feel free to inform me if this solution works for you!
I attempted to break away from the conventional square layout of the internet with this design, but I am struggling to utilize Z-index to layer the backgrounds effectively. Here is the current code: <!--############################################# ...
Displayed here is a snapshot of content included in form validation for a website project that's currently in development: The content is currently situated within a div element with its width set to 20%. Initially, without this rule, the div spanned ...
I came across a scenario where I needed to update the logo path in my application. So, I defined a route like this: Route::post('/updateLogo', 'CaptivePortalController@updateLogo'); After defining the route, I made a POST request as s ...
When using plain JavaScript to create a function that moves a tooltip on mouse move, the function works the first time with clientX and clientY, but fails to work when repeated. What could be causing this issue with clientX and clientY? Any suggestions on ...
Alright, so here's the deal - I have an image that needs to smoothly transition to another image when hovered over. I also have some descriptive text that should crossfade into different text corresponding to the second image. The current setup is ki ...
I need help with creating a one-page website where the navbar links change based on the section of the page you are on. I tried implementing it using HTML, but it didn't work out as expected. The code I used was within the container holding different ...
I am currently developing an Angular application with a dynamic form feature. The data for the dynamic form is loaded through JSON, which is divided into two parts: part 1 and part 2. // JSON Data Part 1 jsonDataPart1: any = [ { "e ...
Whenever I launch my results.html page, I generate a new JSON file and use express.static to allow access to the public folder files in the browser. Although my application is functioning properly, I find myself having to click the button multiple times f ...
Recently, I attempted to transform a date into the dd/mm/yy format using JQuery datepicker. Unfortunately, my results displayed in the dd/mm/yyyy format instead. Here is the code snippet that I utilized: chkIn = $.datepicker.formatDate("dd/mm/yy", cinDate ...
Currently, I am in the process of developing a straightforward website to showcase socket communication and chat capabilities. The server side is coded using Python Flask app, while the client-side utilizes JavaScript. Below is an excerpt from the server c ...
Just diving into the world of Node.js and Express, I'm trying to wrap my head around asynchronous functions and global variables. Specifically, I'm working on connecting to a MySQL database, fetching query results, and displaying them on a test.h ...
Is there a way to trick a closed Google form that says it is "no longer accepting responses"? I'm looking to submit a form past the deadline. Is there a method to access and submit a form that has already been closed? The code for the closed form appe ...
Greetings! I am struggling to retrieve the names and values of checked checkboxes and store them in an array named selected. Despite several attempts, I have not been able to get it working as intended. Below is my code snippet, any assistance in identif ...
When you run the following command: npm install popper.js --save You will receive a warning message that says: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f1eef1f1e4f3afebf2c1b0afb0b7afb0">[email& ...
I am currently working on a parallax website where the sliders are designed to slide from the left and align within the viewport as the user scrolls. However, I have encountered an issue where multiple scroll actions are required for the slide to align pro ...
My website has tooltips enabled, but I am looking to hide the tooltip pop-ups that appear specifically over youtube video embeds. Upon inspecting the webpage, I found the code snippet below that is associated with youtube videos: <div data-tippy-root id ...
I am currently using Windows and WebStorm as my development environment. I attempted to install the angular2-localstorage package by running the command npm install angular2-localstorage, but encountered an error. After realizing that the angular2-localst ...
In my current project, I am focusing on filtering out numerical values only. I have implemented a phone mask using JavaScript on the front end to filter user input to a specific format such as (000)000-000, which includes numbers ranging from [2-9] and [0- ...
Currently, I have two inputs and an array with two number positions. The v-model in each input corresponds to a value in the array. Whenever a change is made in either input field, it reflects on the corresponding position in the array, which works perfect ...
I am currently working on a script where I need to increment a variable by 5 each time the up key is pressed. The issue I am facing is that the variable keeps increasing continuously from a single keypress, whereas I want it to increase in steps of 5 (e.g. ...