How to truncate getting anchor tag text in HTML table

Question

I'm trying to truncate text within the anchor text of an element. I added overflow:hidden;text-overflow:ellipsis; to the style of my anchor tag, but it still wraps. Here's some reproducible HTML: TestTest123ColumnAColumnBEntryAABC123ABC-ABC123ABC` It doesn't seem to like the 50px width on the anchor tag text, I think it's the column width that's messing with it.

P粉099145710 · Answer

If you don’t want to wrap, you can add white-space:nowrap;
If you want to set width, set it to 50px instead of 50 px (no spaces allowed);
If you want width to take effect, set your to a block-level element, e.g. using display:inline-block

Here is the code:




  Test Test 123



  
    
      
        
          
            
              Column A
              Column B
            
            
              Entry A
              
                ABC123ABC-ABC123ABC`