CODEWITHSUNDEEP
css
drake035
drake035

Reputation: 2877

Displaying one line of text only in a table cell

I found several CSS solutions to display only one line of text in an element whose text content would otherwise occupy several lines. However they don't seem to work when the element is a table cell. Is it impossible to achieve such limitation in a table cell?

Upvotes: 2

Views: 4521

Answers (3)

Derek Story
Derek Story

Reputation: 9583

You can do this with using a combo of max-width: and white-space: nowrap; : JS Fidle

HTML

<table>
    <tr>
        <td>content content and a bunch of other stuff.</td>
    </tr>
</table>

CSS

td {
    max-width: 120px;
    white-space: nowrap;
    background: #000;
    color: white;
}

Upvotes: 3

Max Langerak
Max Langerak

Reputation: 1207

You could use:

td {
  white-space: nowrap;
  overflow: hidden;
  width: 50px; /* if you'd like the with set' */
}

This limits it to only using one line of text. If you also like to ignore br tags:

td br{
    line-height: 0px;
    display:none;
}

Upvotes: 2

tcollart
tcollart

Reputation: 1062

You should use the property white-space: nowrap;

You can take a look here if you want more information

http://www.w3schools.com/cssref/pr_text_white-space.asp

Upvotes: 0

Related Questions