Обертывание данных в ячейке


November 2018


123 раз


Я пытаюсь обернуть слово в клетке. <td>Имеет специальную ширину , например , 50px, теперь я хочу , чтобы обернуть данные внутри этой ячейки , так что делают получить на следующей строке , т.е.:

Column 1
Some data


Column 2
Some da..

Я хочу знать, если это возможно, хотя Javascript или CSS?

5 ответы


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


.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:

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

Try to play for Text-overflow:ellipsis (on ie) and the overflow attribute (available in all browsers). You may find hard to do this purelly in css and js.

Getting 'dots' to be printed can be achieve client or server side. But you'll need to implement something to check if your text will be widther than 50px. If this condition is met you will have to shorter the text and add your dots.


<tr><td width="40" style="word-break:break-all"> YOur.........Longgggggggggggggggggg Text

Are you looking to truncate the text programmatically or just cut it off at the exact width of the container? If you just want the text to cut off then you can use overflow:hidden on the containing element and white-space:nowrap on the tag surrounding the text.


Using CSS you can style your td


Here is an example with two tables.

Связанные вопросы