Question

I am trying to wrap a word in a cell. The <td> has a dedicated width e.g 50px, now i want to wrap the data inside that cell so that it doest get on the next line i.e:

Column 1
Some data
wrapped

Required:

Column 2
Some da..

I want to know if it is possible though javascript or CSS?

Answer 1

This can be done by the text-overflow property in CSS, when used in conjunction with some other style rules.

CSS:

.wrappeddata {
    width:          50px;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

The width: 50px defines the width.

The white-space: nowrap; prevents it from wrapping.

The overflow: hidden; stops it being visible past the 50px limit.

The text-overflow: ellipsis; makes the cutoff become replaced with ‘…’

To use it, simply:

<table>
    <tr>
        <td class='wrappeddata'>A block of text that is too long</td>
    </tr>
</table>