What is the best way to shorten text within a table cell?

I am looking to create a table cell that is editable like in Excel. When clicking on the cell, I want a highlighted box to appear for editing and if the entered text exceeds the cell width, it should grow accordingly. Once editing is completed, the cell should display as normal with any excess text being truncated. Essentially, I want the functionality of an Excel sheet cell.

So far, I have tried the following:

<td contenteditable="true" class="content" style="overflow:hidden"></td>

I also attempted to set the z-index to 15 on focus event and remove it on blur event. However, the text entered is not getting trimmed and the cell width updates based on the text length.

Another approach I tried was:

<td><div contenteditable="true" style="width:100%; height:100% overflow:hidden"></div>  
</td>

But unfortunately, the overflow property does not seem to be working as intended.

If anyone has a solution or suggestion, I would greatly appreciate the help. Thank you in advance.

javascriptcsscontenteditable

Answer №1

.content:focus{
  display: inline-block;
  size: "YOUR WIDTH";
}

Next step is to include a query in the javascript section on how to modify the content of that particular cell.

Answer №2

Here is a suggested solution for your issue:

.content{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Additionally, you can also try the following CSS properties:

word-wrap: break-word;
overflow-wrap: break-word;

These properties can help with breaking words when necessary.

Feel free to check out this fiddle for a live example.

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

Numerous classifications and tags available for c3-angular-directive-c3 charts

I have a project requirement to create a stacked bar chart that should look like the image below: https://i.sstatic.net/MBwXy.png Currently, I am utilizing the c3-angular-directive library along with c3.js for chart creation. The challenge lies in dealin ...

javascriptangularjschartsc3.js

Establish the lowest possible height for Angular Material Expansion Panel Content

Is there a way to specify a minimum height for the content of an Angular Material expansion panel when it is open? I have searched for examples on setting the expandedHeight and collapsedHeight for the header, but not for the content itself. The Angular Do ...

cssangularangular-material

Is it possible for <h2> to utilize React's onLoad event?

I need assistance with creating a dynamic calendar that displays the current month upon page load. I am using HTML format within a React JS file. <h2 onLoad={curMonth}></h2> To achieve this, I have imported the curMonth function from another f ...

javascriptreactjs

Navigating production mode in nuxtjs and uncovering errors

There seem to be numerous inquiries regarding this matter. Unfortunately, there doesn't appear to be a definitive solution. Is there any way to view detailed error logs in production mode? https://i.stack.imgur.com/prXUt.jpg ...

javascriptvue.jsnuxt.js

Ways to prevent the mousedown event from firing when reaching a particular number during incrementation

Is there a way to disable the mousedown event once a specific condition is met? For instance, in the code below, how can I prevent the Key and event from functioning when the temp reaches 30 $(document).ready(function() { var temp = 0; var to = n ...

javascriptjqueryhtmlcss

Enhance $ by incorporating additional functionalities using jQuery

Seeking some assistance on how to properly implement the syntax $.functionName(args) I've made attempts using jQuery.extend and $.fn: $.fn.alertSometing = function(param) { alert(param); }; However, upon running: $('.button').on(' ...

javascriptjquery

"Passing an Empty String as Input in a NodeJS Application

app.post('/register',function(req,res){ var user=req.body.username; var pass=req.body.password; var foundUser = new Boolean(false); for(var i=0;i<values.length;i++){ //if((JSON.stringify(values[i].usernames).toLowerCase==JSON. ...

javascriptnode.jsjsonexpress

Guide to Triggering a MODAL's Opening After It's Been Appended to the DOM - incorporating vue 3, bootstrap 5

I'm struggling to grasp the concepts of vue/bootstrap, and simply reading the documentation isn't helping me understand how it all comes together. How can I open a modal that is generated after the page has loaded, triggered by user input? The s ...

javascriptnode.jsvue.jsvuejs3bootstrap-5

Creating a .env file using Vanilla JavaScript to securely store and conceal tokens

I am currently working on a vanilla JavaScript project. Within the app.js file, I am making an API call to retrieve specific values. Initially, I tested the API using Postman by including all the necessary headers there and then implemented the code in my ...

javascript

Is it possible to combine the :last-child pseudo-class with the universal selector (*) in CSS or Sass

Here is the code I am currently using: .loken5 * padding-right: 5px .loken5:last-child padding: 0 I am wondering if there is a way in SASS to achieve the same effect with just one '.loken5' tag for saving space. Thank you :) ...

csssass

Vue Component Failing to Render Recursively

Currently, I am in the process of developing an application utilizing vue.js and vue-cli. This specific application allows users to configure orders. The main feature I am working on is giving users the option to either proceed with configuring another ord ...

javascriptvue.jsvue-componentvue-cli

I'd like to display just two names from a list at a time and have the option to click on a button to reveal the next two names, unfortunately, there

I am trying to modify my code so that it only displays the first 2 items in an array initially, and then on clicking a button, the next 2 names are displayed until the end. However, the code I have written seems to have a bug. Can you help me correct this ...

htmlcssknockout.js

Change the value of a cell in a table dynamically with the use of Angular

I am currently developing a web application using Angular 6. Within the HTML template, I have included some code that showcases a specific part of an array within a table cell. It's worth noting that the table is constructed using div elements. <d ...

htmlcssangular6

Transforming dynamic table text into an image: Step-by-step guide

I have a live scoreboard on my website that pulls information from another site, making the content dynamic. I want to enhance the display by replacing certain elements in the table with images, such as displaying logos instead of club names. However, my k ...

javascripthtmljquerycss

Issue with Heroku deployment: unable to locate JavaScript file

I encountered an issue while deploying my node.js app. Everything seemed to be working fine but it couldn't locate the JavaScript files. The error message displayed was: proove.herokuapp.com/:16 GET 404 (Not Found) Here is the server.js code snip ...

javascripthtmlnode.jsheroku

Executing a function from index.html that continuously loops without any limits

I'm currently working on creating a function that displays specific HTML content only to users with certain roles. Here are the functions I've set up for this: nodejs/server.js app.get('/api/isadmin', ensureAuthenticated, function (re ...

javascriptangularjsnode.js

What could be causing the JSF ajax status success to fail in Chrome?

Whenever I trigger an action in my ManagedBean, I also initiate a JavaScript function via JSF ajax to display a loading popup while the action is being processed. This functionality works flawlessly in Firefox, however, it seems to encounter issues in Chro ...

javascriptjqueryajaxgoogle-chromejsf

Activate the button solely when the text field has been populated without any spaces

Searching for a solution to my query, but all the suggestions I've encountered don't consider spaces as valid input. In the join function I have, the button should be disabled if the user enters only spaces. A requirement is for actual text inpu ...

javascriptjqueryhtml

Is the callback of $.post not being executed until the loop it's contained in finishes?

I'm working on a stock table that allows users to input the quantity of stock to issue. I have a function that verifies whether or not the database has sufficient stock for each entry in the table. When debugging through the code in Chrome, I noticed ...

javascriptphp.post

What is the best way to center elements within a Bootstrap dropdown menu that have become misaligned because of varying widths of icons preceding them?

I am currently working on a Bootstrap 4 dropdown menu where the clickable items consist of an icon and short text positioned next to the icon. I attempted to align both the icons and text within each element using a table layout, but it seems that the drop ...

htmlcssbootstrap-4