Using CSS to truncate text with an ellipsis in a table cell

I am facing a challenge with my table setup

<table class="tbl" border="1">   
    <tr>
        <td width="20%"><span class="spn">column one is longer than usual</span></td>
        <td width="60%"><span class="spn">column two content here</span></td>
        <td width="20%"><span class="spn">column three is the longest of them all</span></td>
    </tr>
</table>

and I have specific CSS settings as well:

.spn
{
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: inherit;
  color: red;    
}

.tbl
{
  width: 300px
}

I am looking to make the first and third columns 20% wide each, while the second column should occupy 60% of the total 300px table width. The text in each column should fill up the entire space and end with '...'. How can I achieve this?

http://jsfiddle.net/8jgmnyn5/

htmlcsshtml-table

Answer №1

You are facing a couple of issues.

  1. To fix the table, make sure to include table-layout:fixed. This will ensure that column widths are respected over displaying all contents.
  2. The spans currently have width:inherit, but since the table columns have specific widths (like 20%), the spans will inherit only a fraction of that width. Remove the width on the spans as elements with display:block don't require explicit widths.
.spn {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*width: inherit;*/
  color: blue;    
}

.tbl
{
  width: 400px;
  table-layout:fixed;
}

By making these changes, your result will resemble what you see in this fiddle.

Answer №2

Are you looking for something along these lines?

http://jsfiddle.net/8jgmnyn5/2/

Check out the modified CSS below: 

.spn {
  display: block;
  color: red;    
}

.spn:after {
    content: "…";
}

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

Applying a border using CSS based on a condition, and removing it upon clicking

I have a requirement where I need to add a border around objects when clicked, and remove the border when clicked again. Despite using an if condition with .css, I couldn't make it work as expected. When I tried to print the border width using alert f ...

jquerycssif-statement

What is the user-agent string for the Safari home screen?

Is there a unique user-agent string specifically for Safari on IOS that identifies it as being in "Home screen" or "app mode"? I've observed a bug on IOS8 where the browser window appears incorrectly, with the time and battery information overlapping ...

htmlioscsssafariuser-agent

Ways to eliminate padding on narrow screens with bootstrap 5.2 features

I have a container with a padding of 5 (p-5) applied to it. However, I am looking for a way to automatically remove the padding when the screen size is small, without adding more CSS rules. Is there a solution using only bootstrap classes? <div class= ...

cssbootstrap-5

Numerous features

My goal is to create a program with two functions - one for addition and one for multiplication. For example, if I input 5 and 6, the calculate button should output 11 and 30, respectively. Should I combine both functions into one or keep them separate? An ...

javascripthtml

The image does not resize vertically to fit the browser window

How can I make a large background image stretch to the size of the browser window when a user first visits the site, similar to how it is done on ? The current code I am using stretches horizontally but won't stretch vertically past a certain min-heig ...

htmlcssstretch

Is there a way to adjust the color of the checkbox?

After creating a show/hide toggle checkbox for a password input, I ran into an issue with changing the background color when it is checked. Our current code base includes a custom styled checkbox, but it lacks the ng-model needed for this particular featur ...

htmlcssinputcheckboxstyles

The resizing issue of Textarea during transitions

Whenever I add the transition property to a textarea, it automatically affects the resizing function of the textarea. Is it possible to disable the transition only when resizing the textarea, but not for the textarea itself? <textarea name="" id="" cla ...

javascriptjqueryhtmlcss

What could be causing the unpredictable behavior of my Material UI Tabs component, where it seems to be overriding other

I am facing an issue with the styling of tabs in my React app dashboard that uses Material UI Tabs. Specifically, I have a tab in the dashboard that opens a modal for adding new users to the system. The modal itself also contains tabs, but no matter how I ...

cssmaterial-uitabsmodal-dialog

Loading information in a directive by utilizing promises in a service with AngularJS

Can anyone lend a hand? I've been struggling to solve this issue. I created a directive (see below) to display a pre-written ul-list on a page using html data fetched asynchronously from a database server. Both the Directive and The Service are funct ...

javascripthtmlangularjsservice

Troubleshooting a problem with the interactive YouTube player in Safari

I have successfully implemented a custom YouTube player on my website, allowing users to watch videos within a modal box. Below is the code for reference: JS & HTML: <script src="https://www.youtube.com/iframe_api"></script> <script typ ...

javascriptjqueryhtmlyoutubesafari

Challenges with incorporating numerous text boxes in real time

There are two text boxes side by side with a "+" sign next to each. When the plus sign is clicked, a new text box appears with both the "+" and "-" signs for adding and removing the text box. I followed instructions from this resource to create my text box ...

jqueryhtmltextboxjquery-effects

Tips for retrieving file data from an input html element

Trying to perform a quick client-side file check for better user experience in JavaScript, but encountering an error that is puzzling. The file is obtained through an input element: The specific error message received is: Uncaught TypeError: Cannot read p ...

htmlfilejscript

Chrome distorts background images with CSS when resized

One thing I noticed is that Chrome seems to display CSS background-images differently compared to using the <img /> tag. I tested two identical images resized to the same dimensions The first image set as a CSS background-image appeared pixelated W ...

htmlcssgoogle-chromebackground-image

AngularJS allows a function to return an array value, which can be displayed in separate blocks on

Building a program that involves working with an AngularJS array. I need to showcase the elements of the AngularJS array, returned by a function, in an organized manner. Each element should be displayed correspondingly - for example, 'first' cont ...

javascripthtmlcssangularjs

Is there a way to save the values of all input fields in a single container using local storage simultaneously?

Let's say I have the following structure: <div id="main"> <div id="wrapper"> <input/> <input/> <input/> </div> </div> My goal is to use localstorage to store the entire wrappe ...

javascriptjqueryhtml

Creating an iPad-inspired password field experience in a text input with jquery: A step-by-step guide

Looking for a plugin that mimics the iPad's password field behavior for credit card number entry. The focus should only reveal the entered digit and then switch to a bullet as the next digit is typed. Additionally, all previously entered digits should ...

javascriptjqueryhtml

How can TypeScript be used to update the values and text of an HTML element?

Is it possible to update specific attributes of an html element using typescript? Below is the code snippet: HTML:- <a ref="#" id="userProfileName" style="padding-top: 0px; padding-bottom: 0px; padding-right: 10px; padding-left ...

htmltypescript

What is the best way to enlarge an image on a webpage so that it is twice its original size?

I have a photo that is 320 x 240 pixels in size, and I want to enlarge it to 640 x 480 pixels when displaying it on a webpage. In the past, I used to achieve this by setting width=640 on the img tag. However, recently I came across the following informati ...

javascripthtmlcssimagescaling

Go to a distant web page, complete the form, and send it in

As the creator of Gearsbook.net, a social network for Gears of War players, I am constantly striving to improve the site's functionality. Currently, it is quite basic and in need of updates. One highly requested feature by users is the ability to lin ...

javascripthtmlajaxforms

What is the best way to include a JavaScript variable in an HTML image src tag?

Even though I know the answer to this question is out there somewhere, I just can't seem to find it (or maybe I'm not recognizing it when I see it!). As a beginner in jquery, please be patient with me. Dilemma: I have a collection of 20 images, ...

javascriptjqueryhtmlimagerandom