How to make text to hide with overflow hidden in table cell?

Question

I have a table cell that I want to hide overflow text over 100px in width. It's here, but it still shows overflow text: http://jsfiddle.net/tkatcqwe/

.text {
  width: 100px;
  background: yellow; 
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

<table><tr><td class='text'>a really long text about random things, blah blah blah blah blah blah blah</td></tr></table>

NewsletterPoll · Accepted Answer · 2015-06-10 01:53:09Z

3

.text {
  max-width: 100px;
  width: 100px;
  background: yellow; 
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

<table><tr><td class='text'>a really long text about random things, blah blah blah blah blah blah blah</td></tr></table>

try adding a max-width of 100px to your .text
added snippet.

edited Jun 10, 2015 at 1:53

answered Jun 9, 2015 at 22:14

NewsletterPoll

5542 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stickers · Accepted Answer · 2015-06-10 13:05:59Z

1

Wrap the text into a <div> or any block level element, or a <span> + display:block if you want to keep the table untouched.

.text {
    width: 100px;
    background: yellow;
    white-space: nowrap;
    overflow: hidden;
}

<table><tr><td><div class='text'>a really long text about random things, blah blah blah blah blah blah blah</div></td></tr></table>

Or set width:100px on the table instead + table-layout:fixed.

table {
    width: 100px;
    table-layout: fixed;
    border-collapse: collapse;
}
.text {
    background: yellow;
    white-space: nowrap;
    overflow: hidden;
}

<table><tr><td class='text'>a really long text about random things, blah blah blah blah blah blah blah</td></tr></table>

edited Jun 10, 2015 at 13:05

answered Jun 10, 2015 at 1:36

Stickers

79.1k24 gold badges157 silver badges195 bronze badges

Collectives™ on Stack Overflow

How to make text to hide with overflow hidden in table cell?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related